Building a Simple Portfolio Web Page With Bootstrap 5

Building a Simple Portfolio Web Page With Bootstrap 5

With the stable version of Bootstrap 5 out, let’s go through some of its observable features. In this article, we will also be looking at how to build a simple web page using Bootstrap 5. This webpage can be used as a portfolio website or an online CV and can also be modified to suit your need. 

Before we begin:

Making a simple web page with this tutorial is simple. But it’s a lot easier to get started with our FREE Bootstrap templates and FREE UI Kits. These are stunning, easily customizable pages that you can start personalizing right away.

Before we dive into the tutorial, let’s take a look at what’s new in Bootstrap 5, and what all has changed.

  • What’s new in Bootstrap 5?
  • Using JS instead of JQuery
  • CSS Custom properties.
  • Customization tab in documentations.
  • Fully customized form controls.
  • New Utility API for better control.
  • Enhanced grid.

Let’s get started with our simple page. Today, we’re going to be building a simple portfolio page with the latest version of Bootstrap 5. We will be using Visual Code Studio and might include some shortcuts or features that might not be available on other code editor software. Here is how the page will look:

build a simple portfolio page with Bootstrap 5

First Step

Let’s start and learn how to build a simple web page with Bootstrap 5. Let’s create a folder, and create an index.html file. After opening the file in a code editor of your choice, lay down the code for the basic HTML file structure and the Bootstrap dependencies from the official website. Let’s also create a CSS file for all the custom styling we’ll be doing and name it styles.css.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is my Portfolio Website</title>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <link rel="stylesheet" href="./styles.css"/>
    </head>
    <body>
<!-- JavaScript Bundle with Popper -->
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    </body>
</html>

Note that we put the Javascript at the bottom, just before the body closing tag. Browsers stop rendering the page until the JS files are downloaded and processed. Keeping the JS files below the HTML, improves the user experience and the overall performance of the website.

Building a Navbar in Bootstrap 5

Let’s now build a navigation bar for our simple web page. The easiest way to do this is to go to the official Bootstrap website and search for “navbar”. We’re going to be using the first example, and modifying it to our taste. Here’s the code straight from the Bootstrap documentation:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

            Dropdown

          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

To make things easier we’re going to be adding comments above and below this code. In Visual Code Studio, you can easily add comments by pressing Ctrl + / (or Command + / on Mac). 

Let’s change some of the classes to

<nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar navbar-light bg-light">

and change

<div class="container-fluid">

to

<div class="container">

Let’s also delete   <form class="d-flex"> and delete the disabled and dropdown menu items, and add the name “My Portfolio” to the navbar. Let’s copy and paste the nav-item section to add Link, About Us, My Works, and Contact to the navbar. The resultant code will look something like this:

<!-- Navbar -->
  <nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar navbar-light bg-light">
     <div class="container">
       <a class="navbar-brand" href="#">My Portfolio</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">Home</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Link</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">About Us</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">My Works</a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">Contact</a>
           </li>
         </ul>
       </div>
     </div>
  </nav>
<!-- Navbar End -->

Let’s head on over to styles.css and code some custom styling for the navbar. Add the following code:

/* Styling for Navbar */
body{
    display: block;
    overflow-x: hidden;
}

nav{
    background-color: white;
}

.navbar-brand img {
    max-height: 50px;
}

.navbar-brand{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 900;
    color: #683aa4;
}

nav ul li a{
    color: #a9a9a9;
    font-size: 22px;
    margin: auto 10px; 
}

nav ul li a:hover{
    color: #683aa4;
}

You will also need to change the following section to:

<ul class="navbar-nav ms-auto">

Your navbar should now look ready to go! Let’s now move on to the next section of the web page, the hero section.

How to Build A Hero Section using Bootstrap 5

Now that the navbar has been created, the next section can be coded. This is a fairly simple section. Make sure that you have the right kind of images to upload here. You will need a main image for the banner and 3 icons for the cards right below it. We will be using a button from the official Bootstrap documentation. Find one you like, or just use the one we’ve used here.

<!-- Hero section -->
          <section id="hero">
              <div class="container">
                  <div class="row">
                      <div class="col">
                          <h1>Hi,<br>I am John</h1>
                          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet soluta veniam voluptate aliquam deleniti labore quod quis illum, sapiente nam nesciunt magni voluptatibus voluptatem incidunt placeat consequuntur quaerat voluptatum expedita!</p>
                          <button type="button" class="btn btn-dark btn-lg">Book a Skype Call</button>
                       </div>
                       <div class="col">
                           <img src="..." alt="...">
                       </div>
                  </div>
                  <div class="row cards">
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Skills</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Experience</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Projects</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>
          <!-- Hero section ends here →

Let’s now style this section. Head over to the styles.css and enter the following code:

/* Styling for Hero Section */
section{
    padding-top: 50px;
    padding-bottom: 50px;
}
 
section h1{
    text-transform: uppercase;
    font-weight: 900;
    color: #683aa4;
    text-align: left;
    margin-bottom: 20px;
} 

section p{
    font-size: 16px;
    font-weight: 300;
}

button{
    max-width: 50%;
    border-radius: 50px !important;
}

#hero .col{
    justify-content: center;
    flex-direction: column;
    display: flex;
}

#hero .img-col{
    justify-content: flex-end;
    margin-top: 100px;
}

#hero img{
    max-width: 130%; !important;
    width: 130%;
}

/* Styling for the cards */
#hero .card{
    box-shadow: 11px 7px 16px #f9f9f9;
    border: 0;
    text-align: center;
}

 #hero .cards .card{
    width: 18rem;
}

/* Styling for icon if you add them */
#hero .icon{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

Let’s now move on to the next section.

How to Create About Us section in Bootstrap 5

This section is fairly simple. Just use the following code to create the section. Be sure to add the image you want, and reuse the button from above.

<!-- About Us -->
          <section id="about-us">
              <div class="container">
                  <div class="row align-items-center">
                      <div class="col">
                          <!-- another image can be inserted here -->
                          <img src="..." alt="..." class="img-fluid"/>
                      </div>
                      <div class="col">
                          <h1>About Me</h1>
                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia tenetur reiciendis in quae, rem corporis id sequi debitis aliquam laudantium illum vel unde? Praesentium laboriosam neque eaque architecto maxime nihil?</p>
                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia tenetur reiciendis in quae, rem corporis id sequi debitis aliquam laudantium illum vel unde? Praesentium laboriosam neque eaque architecto maxime nihil?</p>
                          <button type="button" class="btn btn-dark btn-lg">Hire me!</button>
                    </div>
                  </div>
              </div>
          </section>
          <!-- End of About Us -->

 

The next section will focus on “Projects” where you can highlight some of your top projects.

How to build a Projects/Portfolio Section using Bootstrap 5

We will also be using a card from the official Bootstrap 5 documentation. Choose a card with an image or just use the code we have used here. Make sure you add your own images and personalize the page.

<!-- Projects section -->
          <div class="container">
              <div class="row align-items-center projects">
                  <div class="col"> 
                    <h1>Our Project</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quod aliquam corporis tempore nostrum. Animi rem quisquam deleniti qui ad ipsa quod! Animi corrupti, ex blanditiis dolor error nulla consectetur.</p>
                  </div>         
                  <div class="row align-items-center">
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 1</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 2</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 3</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                </div>
              </div>
          </div>
          <!-- End of Projects Section -->

 

Here is some custom styling as well:

/* Styling for the Projects Section */
#projects .projects{
    margin-bottom: 50px;
}

Let’s move on to the footer section of the web page. Since this is a simple web page that serves as a portfolio, we can use this section as a contact section.


How to Build A Contact Us section using Bootstrap 5

<!-- Contact Section -->
          <section id="contact">
            <div class="container">
                <div class="row align-items-center projects">
                    <div class="col"> 
                      <h1>Contact me</h1>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quod aliquam corporis tempore nostrum. Animi rem quisquam deleniti qui ad ipsa quod! Animi corrupti, ex blanditiis dolor error nulla consectetur.</p>
                    </div>
                </div>
            </div>
          </section>
          <!-- End of contact section -->

Add some custom styling as well to make this section look good:

/* contact section styling */
#contact{     
text-align: center;     
background-color: #683aa4;
color: white;
}
>#contact h1{
text-align: center;
color: white;
}

So now that you’re done, here’s what the final code would look like:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is my Portfolio Website</title>
        <!-- CSS only -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
        <link rel="stylesheet" href="./styles.css"/>
    </head>
    <body>

        <!-- Navbar -->
        <nav class="py-3 navbar navbar-expand-lg fixed-top auto-hiding-navbar navbar-light bg-light">
            <div class="container">
              <a class="navbar-brand" href="#">My Portfolio</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">My Works</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                  </li>
                </ul>            
              </div>
            </div>
          </nav>
          <!-- Navbar End -->

          <!-- Hero section -->
          <section id="hero">
              <div class="container">
                  <div class="row">
                      <div class="col">
                          <h1>Hi,<br>I am John</h1>
                          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet soluta veniam voluptate aliquam deleniti labore quod quis illum, sapiente nam nesciunt magni voluptatibus voluptatem incidunt placeat consequuntur quaerat voluptatum expedita!</p>
                          <button type="button" class="btn btn-dark btn-lg">Book a Skype Call</button>
                       </div>
                       <div class="col">
                           <img src="..." alt="...">
                       </div>
                  </div>
                  <div class="row cards">
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Skills</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Experience</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                      <div class="col-md-4 d-flex justify-content-center">
                        <div class="card">
                            <div class="card-body">
                                <!-- here is where they add the ICON -->
                                <img src="..." alt="..." class="icon">
                                <h5 class="card-title">Projects</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                          </div>
                      </div>
                  </div>
              </div>
          </section>
         <!-- Hero section ends here -->

           <!-- About Us -->
          <section id="about-us">
              <div class="container">
                  <div class="row align-items-center">
                      <div class="col">
                          <!-- another image can be inserted here -->
                          <img src="..." alt="..." class="img-fluid"/>
                      </div>
                      <div class="col">
                          <h1>About Me</h1>
                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia tenetur reiciendis in quae, rem corporis id sequi debitis aliquam laudantium illum vel unde? Praesentium laboriosam neque eaque architecto maxime nihil?</p>
                          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia tenetur reiciendis in quae, rem corporis id sequi debitis aliquam laudantium illum vel unde? Praesentium laboriosam neque eaque architecto maxime nihil?</p>
                          <button type="button" class="btn btn-dark btn-lg">Hire me!</button>
                    </div>
                  </div>
              </div>
          </section>
          <!-- End of About Us -->

          <!-- Projects section -->
          <div class="container">
              <div class="row align-items-center projects">
                  <div class="col"> 
                    <h1>Our Project</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quod aliquam corporis tempore nostrum. Animi rem quisquam deleniti qui ad ipsa quod! Animi corrupti, ex blanditiis dolor error nulla consectetur.</p>
                  </div>
                  <div class="row align-items-center">
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." class="card-img-top" alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 1</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 2</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                    <div class="col">
                        <div class="card mb-3">
                            <img src="..." alt="...">
                            <div class="card-body">
                              <h5 class="card-title">Title 3</h5>
                              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                              <p class="card-text"><small class="text-muted">Some useful info</small></p>
                            </div>
                          </div>
                    </div>
                </div>
              </div>
          </div>
          <!-- End of Projects Section -->

          <!-- Contact Section -->
          <section id="contact">
            <div class="container">
                <div class="row align-items-center projects">
                    <div class="col"> 
                      <h1>Contact me</h1>
                      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem quod aliquam corporis tempore nostrum. Animi rem quisquam deleniti qui ad ipsa quod! Animi corrupti, ex blanditiis dolor error nulla consectetur.</p>
                    </div>
                </div>
            </div>
          </section>
          <!-- End of contact section -->

          <!-- JavaScript Bundle with Popper -->
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
        </body>
</html>

 

CSS:

/* Styling for Navbar */
body{
    display: block;
    overflow-x: hidden;
}

nav{
    background-color: white;
}

.navbar-brand img {
    max-height: 50px;
}

.navbar-brand{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 900;
     color: #683aa4;
}

nav ul li a{
    color: #a9a9a9;
    font-size: 22px;
    margin: auto 10px; 
}

nav ul li a:hover{
    color: #683aa4;
}

/* Styling for Hero Section */
section{
    padding-top: 50px;
    padding-bottom: 50px;
}

section h1{
    text-transform: uppercase;
    font-weight: 900;
    color: #683aa4;
    text-align: left;
    margin-bottom: 20px;
} 
 
section p{
    font-size: 16px;
    font-weight: 300;
}
 
button{
    max-width: 50%;
    border-radius: 50px !important;
}

#hero .col{
    justify-content: center;
    flex-direction: column;
    display: flex;
}

#hero .img-col{
    justify-content: flex-end;
    margin-top: 100px;
}
 
#hero img{
    max-width: 130%; !important;
    width: 130%;
}

/* Styling for the cards */
#hero .card{
    box-shadow: 11px 7px 16px #f9f9f9;
    border: 0;
    text-align: center;
}

 #hero .cards .card{
    width: 18rem;
}

/* Styling for Icons if added */
 #hero .icon{
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
}

/* Styling for the Project Section */
#projects .projects{
    margin-bottom: 50px;
}

/* contact section styling */
#contact{
    text-align: center;
    background-color: #683aa4;
    color: white;
}

#contact h1{
    text-align: center;
    color: white;
}

 

This is how the page should look. It may look a little different since you’ve used different images:

Example of the simple page built with Bootstrap 5

Leave a Reply

Your email address will not be published. Required fields are marked *