Bootstrap Tutorial - Make a Portfolio Website Using HTML, CSS, and Bootstrap 5

Posted by Ridwan Fadilah on Jul 10, 2020 - 11:31 am

Bootstrap 5 tutorial. How to make a portfolio website. A simple way to make a portfolio website.

Bootstrap has release its new version past month.

However, I'll not discuss that. Here, I'll try to make a portfolio website by using the new Bootstrap 5.

In this tutorial, I also use Font Awesome Icon.

I'll make a single page portfolio website. The page will have four-section such as about-section, experience section, skills section, and education section.

Here's the step by step of this tutorial:

Making a Sidebar
About Section
Experience Section
Skills Section
Education Section

What's New in Bootstrap 5?

I'll just talk a little about this new version.

New look
Removing jQuery
CSS custom properties
Improved customizing docs
Updated forms
Utilities API
etc

The HTML and Folder Structure

Before we start to make a portfolio website using HTML, CSS, and Bootstrap 5, there's something to note. Please notice the HTML and the folder structure. To make it easier, you can follow this folder structure:

Place the Bootstrap file (JS and CSS) into the JS and CSS folder.

The FA folder is used for the font-awesome.

The img folder for the image.

Here's the HTML:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>


<script src="fa/js/all.js"></script>

<link rel="stylesheet" href="css/bootstrap.min.css">

<link rel="stylesheet" href="custom.css">
</head>
<body id="page-top" data-spy="scroll" data-target="#sideNav">
....
....

<script src="js/bootstrap.min.js"></script>
</body>
</html>

Here's the first set up of the custom CSS:

html { scroll-behavior: smooth; }
h1 { font-size: 5rem; }
section { max-width: 75rem; }

@media (min-width:992px) {
body {
padding-top: 0;
padding-left: 17rem;
}

section {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}

}

@media (min-width:768px) {
section {
min-height: 100vh;
}

}

Now, let's start to make a portfolio website using HTML, CSS, and Bootstrap 5.

The first step in this tutorial is making a sidebar.

The sidebar will have a fixed position with 100VH of height. The sidebar also have a gradient color background.

Use the standard Bootstrap 5 navigation and then make some changes using your custom CSS file.

HTML:

<nav class="navbar navbar-expand-lg navbar-dark bg-grad fixed-top" id="sideNav">

<a class="navbar-brand" href="#page-top">
<img src="img/default.jpg" alt="..." class="img-thumbnail rounded-circle border-0 bg-transparent float-left">
<span class="d-block d-lg-none text-uppercase">
your name
</span>
</a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">

<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#experience">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#education">Education</a>
</li>
</ul>

</div>

</nav>

CSS:

.navbar {
padding: 0.5rem;
}

.bg-grad {
background-color: #21d4fd;
background-image: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
}

Place on CSS @media (min-width:992px)

#sideNav {
text-align: center;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 17rem;
height: 100vh;
}

#sideNav .navbar-brand {
display: flex;
margin: auto auto 0;
padding: .5rem
}

#sideNav .navbar-collapse {
display: flex;
align-items: flex-start;
flex-grow: 0;
width: 100%;
margin-bottom: auto;
}

#sideNav .navbar-collapse .navbar-nav {
flex-direction: column;
width: 100%;
}

#sideNav .navbar-collapse .navbar-nav .nav-item {
display: block;
}

#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
display: block;
}

Place on CSS @media (min-width:768px)

#sideNav a img {
display: none;
}

Place on CSS @media (max-width:768px)

#sideNav a img {
display: inline-block;
width: 32px;
}

The code above will display by the browser like this:

The 'About' Section

Now, we'll make the first section. This section will contain about yourself, profile picture, address, phone number, social media account, and your public (business) email.

Add the container first, place it after the navigation bar. Please note, all sections will place inside this container:

<nav class="navbar navbar-expand-lg navbar-dark bg-grad fixed-top" id="sideNav">
....
</nav>

<div class="container-fluid p-0 bg-dark">
....
Place all of the sections here
....
</div>

The 'About' section (HTML):

<section class="about-section p-3 p-lg-5 d-flex align-items-center" id="about">
<div class="w-100">
<div class="card mb-3 bg-transparent border-0">
<div class="row g-0">
<div class="col-md-4 text-center p-3 my-auto">
<img src="img/default.jpg" alt="..." class="img-thumbnail img-fluid rounded-circle border-0 my-auto bg-transparent" style="max-width: 200px;">
</div>

<div class="col-md-8">
<div class="card-body">
<h1 class="card-title text-white">Your<span class="text-primary">Name</span></h1>
<div class="subheading mb-3 text-white">Jl.dr.Setiabudi, Bandung, West Java, Indonesia. (+62) 822 12345678 <a href="mailto:[email protected]">[email protected]</a>
</div>
<p class="card-text text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sequi aliquid qui quas mollitia voluptates velit amet dolore vitae excepturi debitis cupiditate quae beatae, error impedit, quasi similique laboriosam, voluptatibus odit nam. Quas, distinctio porro exercitationem nihil rem, quia enim nobis, voluptatem aspernatur quibusdam dignissimos recusandae dolore?</p>

<ul class="list-inline text-right">

<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

</ul>

</div>
</div>
</div>
</div>
</div>
</section>

The CSS:

section.about-section {
background-image: url('img/close-up-img/18707.jpg');
background-attachment: fixed;
background-size: cover;
}

section.skill-section {
background-color: #FF3CAC;
background-image: linear-gradient(50deg, #FF3CAC 0%, #784BA0 50%, #2886C5 100%);
transform: skewY(-5deg);
}

section.skill-section,
section.about-section {
max-width: 100%;
}

The 'About' and 'Skills' section will have the same max-width.

Place on CSS @media (min-width:768px)

section.about-section::before {
content: '';
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
position: absolute;
display: block;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}

Place on CSS @media (max-width:768px)

section.about-section .col-md-4 img {
display: none;
}

section.about-section .col-md-8 .card-body {
margin-top: 3rem;
}

The code above will display by the browser like this:

Bootstrap 5 Portfolio Website: About Section

I use a stock image with a free license from freepik.com. If you want to use the same image, please visit the link below:

Technology photo created by pressfoto - www.freepik.com

The 'Experience' Section

As the name suggests, this section will contain pieces of information about your work experiences.

I only place three content here. You can add more experiences to this section as do you want.

The 'Experience' section (HTML):

<section class="p-3 p-lg-5 d-flex align-items-center" id="experience">
<div class="w-100">
<h2 class="mb-5 mt-3 text-white">Experience</h2>

<div class="portfolio-content">
<h3 class="mb-0">Mobile App Developer</h3>
<div class="subheading mb-3">IniApps.Inc</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, libero rem tenetur explicabo, sed itaque ipsum praesentium saepe nesciunt facilis minus doloremque ullam sapiente. Vero velit ducimus voluptates provident obcaecati veritatis enim.</p>
<div class="text-md-right">
<span class="text-white">June 2019 - Present</span>
</div>
</div>

<hr class="hr-short text-primary">

<div class="portfolio-content">
<h3 class="mb-0">Senior Web Developer</h3>
<div class="subheading mb-3">IniApps.Inc</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, rem maxime est odit repellat quia! Laboriosam, debitis omnis magni qui aspernatur alias, nostrum iure nesciunt provident ducimus modi?</p>
<div class="text-md-right">
<span class="text-white">June 2017 - 2019</span>
</div>
</div>

<hr class="hr-short text-primary">

<div class="portfolio-content">
<h3 class="mb-0">Junior Web Developer</h3>
<div class="subheading mb-3">IniApps.Inc</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam dolorem earum obcaecati iusto id saepe eveniet, consectetur quibusdam similique aliquam sed placeat quisquam perspiciatis dolores consequatur. Aut assumenda ullam voluptate repellendus molestias debitis ipsam laborum distinctio accusantium. Iste?</p>
<div class="text-md-right">
<span class="text-white">Jan 2015 - 2017</span>
</div>
</div>

<hr class="hr-short text-primary">

</div>
</section>

In this section, I also customize the horizontal rules (hr) element. I make it shorten and bold.

Here's the CSS for the hr element:

hr.hr-short {
border-width: .25rem;
width: 25%;
}

hr:not([size]) {
height: 5px;
}

After the hr element, there's no change for the 'section' element. Only the elements with the portfolio-content class will be customized.

Here's the CSS:

.portfolio-content {
color: white;
}

This section will display by the browser like this:

Bootstrap 5 Portfolio Website: Experience Section

The 'Skills' Section

The next is the 'skills' section. This section has a diagonal appearance direction with a gradient color.

Place all your skills information in this section.

The HTML:

<section class="skill-section p-3 p-lg-5 d-flex align-items-center" id="skills">
<div class="w-100 d-flex">
<div class="container p-3 shadow-lg">
<h2 class="mb-5 text-white text-center">
Skills
</h2>

<div class="row g-0 text-black-50">
<div class="skill-column col-md-6 d-flex justify-content-center p-5" id="html5">
<i class="fab fa-html5" style="font-size:50px"></i>
<h3 class="m-auto">HTML</h3>
</div>

<div class="skill-column col-md-6 d-flex justify-content-center p-5" id="css3">
<i class="fab fa-css3" style="font-size:50px"></i>
<h3 class="m-auto">CSS</h3>
</div>
</div>

<div class="row g-0 text-black-50">
<div class="skill-column col-md-6 d-flex justify-content-center p-5" id="js">
<i class="fab fa-js-square" style="font-size:50px"></i>
<h3 class="m-auto">JavaScript</h3>
</div>

<div class="skill-column col-md-6 d-flex justify-content-center p-5" id="php">
<i class="fab fa-php" style="font-size:50px"></i>
<h3 class="m-auto">PHP</h3>
</div>
</div>

</div>
</div>
</section>

The CSS:

#html5 {
background-color: #21d4fd;
background-image: linear-gradient(-7deg, #FAD961 0%, #F76B1C 100%);
}

#css3 {
background-color: #0093E9;
background-image: linear-gradient(-7deg, #0093E9 0%, #80D0C7 100%);
}

#js {
background-color: #FBAB7E;
background-image: linear-gradient(-7deg, #FBAB7E 0%, rgb(255, 252, 70) 100%);
}

#php {
background-color: #4158D0;
background-image: linear-gradient(-7deg, #4158D0 0%, #C850C0 100%);
}

.skill-column {
transition: ease;
transition-duration: 1s;
transition-delay: 0.2s;
}

.skill-column:hover {
transform: scale(1.2);
box-shadow: -7px 12px 3px rgba(0, 0, 0, 0.1);
z-index: 2;
}

The skill-column:hover is used to make a zoom animation when the mouse over the element.

The section above will display by the browser like this:

Bootstrap 5 Portfolio Website: Skills Section

and when the mouse over the column, the skill column will display by the browser like this:

Bootstrap 5 Portfolio Website: Skills Column Hover

The 'Education' Section

The last is the 'education section. This section is simpler than another section element. Just add the HTML without adding more style to the CSS.

HTML:

<section class="education-section p-3 p-lg-5 d-flex align-items-center" id="education">
<div class="w-100">

<h2 class="mb-5 mt-3 text-white">Education</h2>
<div class="portfolio-content">
<h3 class="mb-0">University of Google</h3>
<div class="subheading mb-3">Computer - Web Design/Programming
</div>
<div class="text-md-right">
<span class="text-white">May 2010 - 2014</span>
</div>
</div>

<div class="portfolio-content">
<h3 class="mb-0">University of YouTube</h3>
<div class="subheading mb-3">Web Development</div>
<div class="text-md-right">
<span class="text-white">June 2006 - 2010</span>
</div>
</div>

</div>
</section>

The section above will display by the browser like this:

Bootstrap 5 Portfolio Website: Education Section

Okay, that's a tutorial about how to make a website portfolio using HTML, CSS, and Bootstrap 5. Find another Bootstrap tutorial on the related articles below.

If you want to use this template, click the download link below:

Download Template

You can also find another tutorial on our YouTube Channel.

Thanks for reading, see you in the next article.

HTML5 Tutorial

CodeIgniter 4

Bootstrap Tutorial

Installation Guide

CSS Tutorial

JavaScript Tutorial