Many new features have been added in the bootstrap 5 to implement a template with a more attractive look without less use of JQuery. The way to design a very simple HTML template using bootstrap 5 has shown in this tutorial by adding multiple parts of the template step by step. Before starting this tutorial, you have to complete the following tasks.
Pre-requisites:
A. Create a folder to store the files and folders of the template. I have created a folder named BS5-template.
B. Create the following folders inside the template folder.
css
images
js
fonts
C. Add the following CSS file inside the css folder.
D. Add the required image files inside the images folder. The image files which are used in this tutorial are given in the following zip file. You can download the file, unzip it and store the images in the images folder.
E. Add the following JS files inside the JS folder.
bootstrap.bundle.min
jquery.min
F. Download the boxicons and LineIcons fonts and add the files inside the fonts folder. Fonts files are given below as zip file. You can download the zip file, unzip it and store the files in the fonts folder.
G. Create the index.html file to design the template.
Steps:
The steps for impleting the template are given below. Follow the steps one by one to create the template.
01. Add the following script inside the head section
<meta charset="utf-8" />
<title>HTML Template using Bootstrap 5 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="images/favicon.png" rel="icon">
<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script>
$( document ).ready(function() {
$(window).scroll(function() {
var startPx = $(window).scrollTop();
startPx >= 50 ? $(".normal-nav").addClass("sticky-nav") : $(".normal-nav").removeClass("sticky-nav");
});
});
</script>
02. Add the following script inside the body to add the Navbar
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-top normal-nav navbar-light ">
<div class="container">
<a class="navbar-brand logo" href="">
<img src="images/logo.jpg" height="30">
</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 float-end" id="navbarSupportedContent">
<ul class="navbar-nav" id="mySidenav">
<li class="nav-item active">
<a href="#top" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#services" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#testimonials" class="nav-link">Testimonials</a>
</li>
<li class="nav-item">
<a href="#team" class="nav-link">Team</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->03. Add the following script inside the body under Navbar to add the Header content.
<!-- Header Start -->
<section class="header-bg align-items-center position-relative d-flex " id="top" >
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="header-title">
<p></p>
<h1 class="font-weight-bold main-title ">Bootstrap 5 Theme From The Scratch</h1>
<p class="text-sub ml-2 mb-4 pb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="" class="btn btn-info ml-2">Learn More <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
</div>
</div>
<div class="col-lg-5 offset-lg-1">
<div class="mt-5 mt-lg-0">
<img src="images/banner.jpg" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
</section>
<!-- Header End -->04. Add the following script inside the body under Header to add the Service content.
<!-- Service start -->
<section id="services" class="section bg-grey">
<div class="container ">
<div class="row">
<div class="col-xl-6 col-lg-7 col-md-9 mx-auto">
<div class="text-center mb-5">
<div class="text-center mb-5 ">
<h2 class=" text-uppercase mb-3">Services</h2>
<p class="text-sub size-14">Ut enim text-darkad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="service-box box-style">
<div class="service-icon box-icon-style">
<i class="lni lni-leaf"></i>
</div>
<div class="box-content-style service-content">
<h4>Clean & Refreshing</h4>
<p>Lorem ipsum dolor sit amet, adipscing elitr, sed diam nonumy eirmod tempor ividunt
labor dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box box-style">
<div class="service-icon box-icon-style">
<i class="lni lni-infinite"></i>
</div>
<div class="box-content-style service-content">
<h4>Fully Customizable</h4>
<p>Lorem ipsum dolor sit amet, adipscing elitr, sed diam nonumy eirmod tempor ividunt
labor dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="service-box box-style">
<div class="service-icon box-icon-style">
<i class="lni lni-reload"></i>
</div>
<div class="box-content-style service-content">
<h4>Regular Updates</h4>
<p>Lorem ipsum dolor sit amet, adipscing elitr, sed diam nonumy eirmod tempor ividunt
labor dolore magna.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services End -->05. Add the following script inside the body under Service to add the About content.
<!-- About Start -->
<section class="section " id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class=" text-uppercase mb-3">About Us</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-5">
<img src="images/header-about.png" alt="" class="img-fluid mx-auto d-block">
</div>
<div class="col-lg-6 offset-lg-1">
<div class="text-sub mt-5 mt-lg-0">
<h3 class="title font-weight-medium mb-4">A perfect bootstrap theme</h3>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="" class="btn btn-info ml-2">Learn More <span class="ml-2 right-icon"><i class="fas fa-arrow-right"></i></span></a>
</div>
</div>
</div>
</div>
</section>
<!-- About End -->06. Add the following script inside the body under About to add the Testimonial content.
<!-- Testimonials Start -->
<section class="section bg-grey" id="testimonials">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class="text-uppercase mb-3">Testimonials</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="col-md-9 col-center m-auto">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="item carousel-item active">
<p class="testimonials">
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
"Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa."
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<div class="img-box" ><img src="images/client.jpg" alt=""></div>
<p class="overview" style="text-align: center"><b>Taslima Miji</b><br/> CEO of Techmania</p>
</div>
<div class="item carousel-item">
<p class="testimonials">
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
"Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper."
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<div class="img-box"><img src="images/client2.jpg" alt=""></div>
<p class="overview" style="text-align: center"><b>Selima Ahmad</b><br/> founder of the Bangladesh Women</p>
</div>
<div class="item carousel-item">
<p class="testimonials">
<i class="bx bxs-quote-alt-left quote-icon-left"></i>
"Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam."
<i class="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
<div class="img-box"><img src="images/client3.jpg" alt=""></div>
<p class="overview" style="text-align: center"><b>Samira Zuberi Himika</b><br/> founder & Managing Director of ‘team engine’</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</section>
<!-- Testimonials End -->07. Add the following script inside the body under Testimonial to add the Team content.
<!-- ======= Team Section ======= -->
<section id="team" class="section section-bg">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2 class=" text-uppercase mb-3">Team Members</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="member">
<div class="member-img">
<img src="images/team-1.jpg" class="img-fluid" alt="">
<div class="social">
</div>
</div>
<div class="member-info">
<h4>Nur Sami Noman</h4>
<span>Chief Executive Officer</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="member">
<div class="member-img">
<img src="images/team-2.jpg" class="img-fluid" alt="">
<div class="social">
</div>
</div>
<div class="member-info">
<h4>Omar Farook </h4>
<span>Product Manager</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="member">
<div class="member-img">
<img src="images/team-3.jpg" class="img-fluid" alt="">
<div class="social">
</div>
</div>
<div class="member-info">
<h4>Arjun Deba Nath</h4>
<span>CTO</span>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="member">
<div class="member-img">
<img src="images/team-4.jpg" class="img-fluid" alt="">
<div class="social">
</div>
</div>
<div class="member-info">
<h4>Saikat Islam</h4>
<span>Accountant</span>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Team Section -->08. Add the following script inside the body under Team to add the Contact content.
<!-- Contact Start -->
<section class="section bg-grey" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8">
<div class="text-center mb-5">
<h2 class=" text-uppercase mb-3">Contact</h2>
<p class="text-sub size-14">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div>
<iframe style="border:0; width: 100%; height: 270px;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" allowfullscreen></iframe>
</div>
<div class="row mt-5">
<div class="col-lg-4">
<div class="info">
<div class="address">
<i class="bi bi-geo-alt"></i>
<h4>Location:</h4>
<p>A108 Adam Street, New York, NY 535022</p>
</div>
<div class="email">
<i class="bi bi-envelope"></i>
<h4>Email:</h4>
<p>info@example.com</p>
</div>
<div class="phone">
<i class="bi bi-phone"></i>
<h4>Call:</h4>
<p>+1 5589 55488 55s</p>
</div>
</div>
</div>
<div class="col-lg-8 mt-5 mt-lg-0">
<form action="forms/contact.php" method="post" role="form" class="php-email-form">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" required>
</div>
<div class="col-md-6 form-group mt-3 mt-md-3">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group mt-3">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" required>
</div>
<div class="form-group mt-3">
<textarea class="form-control" name="message" rows="5" placeholder="Message" required></textarea>
</div>
<br/>
<div class="text-center"><button type="submit">Send Message</button></div>
</form>
</div>
</div>
</div>
</section>
<!-- contact End -->09. Add the following script inside the body under Contact to add the footer content.
<!-- Footer Start -->
<section class="footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<p class="text-center white"><a class="text-white" href="https://fahmidasclassroom.com">fahmidasclassroom.com</a>©2021 All Rights Reserved.</p>
</div>
</div>
</div>
</section>
<!-- Footer End -->10. Now, your template is ready to check.
Well Done!!!!!!!
You can check the following video link for doing the steps easily.