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.
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.
#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:
<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:
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 section above will display by the browser like this:
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: