Portfolio tutorial – how to build a stunning, responsive website with Bootstrap 4

Portfolio Template - Bootstrap 4 & Material Design

MDB Gulp required

In this tutorial, we use MDB Gulp version. If you didn't follow the previous lessons about Gulp and customization - please do it before you start this one.

1. MDB Gulp lesson

2. MDB Customization lesson

In this tutorial, you will create a stunning portfolio website. We will use some advanced MDB components and learn some advanced web design techniques.

Step 1 - launching the project

1. Open the MDB Gulp package in your code editor.

2. Type gulp mdb-go command to your terminal to launch gulp.

It should open a new window in your browser.

Step 2 - the basic structure

Similarly to the previous tutorial, in the beginning, we'll create a basic structure for our project.

Open the index.html file in your project directory (MDB Gulp / dist / index.html) and paste the following code below the body tag:



<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

    

Step 3 - the Full Page Intro

We already created The Full Page Intro in the previous tutorials, so I'm not going to explain it in details again. This time it will be copy - paste that we can quickly go forward to more advanced questions.

If you need some reminder - go back to the "Landing Page tutorial".

Go to the Intros Docs and copy the code of the Video background intro. Then paste it to your project.

Remember to copy both HTML and CSS code!



<!-- Main navigation -->
<header>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
    <div class="container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav mr-auto smooth-scroll">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about" data-offset="90">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#features" data-offset="90">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services" data-offset="90">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#opinions" data-offset="30">Opinions</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#team" data-offset="90">Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact" data-offset="90">Contact</a>
          </li>
        </ul>
        <!-- Social Icon  -->
        <ul class="navbar-nav nav-flex-icons">
          <li class="nav-item">
            <a class="nav-link">
              <i class="fa fa-facebook light-green-text-2"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link">
              <i class="fa fa-twitter light-green-text-2"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link">
              <i class="fa fa-instagram light-green-text-2"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- Navbar -->
  <!-- Full Page Intro -->
  <div class="view">
    <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
      <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">
    </video>
    <!-- Mask & flexbox options-->
    <div class="mask rgba-gradient d-flex justify-content-center align-items-center">
      <!-- Content -->
      <div class="container px-md-3 px-sm-0">
        <!--Grid row-->
        <div class="row wow fadeIn">
          <!--Grid column-->
          <div class="col-md-12 mb-4 white-text text-center wow fadeIn">
            <h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">Creative Agency</h3>
            <hr class="hr-light my-4 w-75">
            <h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
            <a href="#!" class="btn btn-rounded btn-outline-white">
              <i class="fa fa-home"></i> Visit us
            </a>
          </div>
          <!--Grid column-->
        </div>
        <!--Grid row-->
      </div>
      <!-- Content -->
    </div>
    <!-- Mask & flexbox options-->
  </div>
  <!-- Full Page Intro -->
</header>

    


/* Required for full background image */
html,
body,
header,
.view {
  height: 100%;
}

@media (max-width: 740px) {
  html,
  body,
  header,
  .view {
    height: 100vh;
  }
}

.top-nav-collapse {
  background-color: #563e91 !important;
}

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: #563e91 !important;
  }
}

.rgba-gradient {
  background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
  background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
  background: linear-gradient(to 45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
}

    

Have a look at <video> element. Inside you will find <source> element with the URL of the video which is displayed as a background of our Intro.



<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4">

    

A few things to remember about videos:

  • You have to upload the video and provide a direct link to this. Youtube links aren't supported (which is good, otherwise you would display ads from Youtube to your users ).
  • You can use whatever video you like but remember - videos are heavy. Choose the one that is short and relatively light.
  • If you need some free stock videos - have a look at this great resources: Pexel Videos.

By the way - have you notice this?

poster="https://mdbootstrap.com/img/Photos/Others/background.jpg

This is an alternative image for the video.

Always remember to place an alternative image for your video. It can happen that in some cases video cannot be displayed and in such situations browser will render the alternative image which prevents your website to look broken.

Step 4 - Navbar links

The last thing we will do in this lesson is changing the Navbar links.

In the Navbar find <ul> element with the links inside and replace it with this code:



<ul class="navbar-nav mr-auto smooth-scroll">
  <li class="nav-item">
      <a class="nav-link" href="#intro">Home
      </a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#about" data-offset="90">About</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#projects" data-offset="90">Projects</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#gallery" data-offset="90">Gallery</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#testimonials" data-offset="30">Testimonials</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#articles" data-offset="90">Articles</a>
  </li>
  <li class="nav-item">
      <a class="nav-link" href="#contact" data-offset="90">Contact</a>
  </li>
</ul>

    

There is nothing new to explain. We just changed the names and #hash links which will be connected to the sections we will create in the future lessons.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits