Bootstrap Homepage Template Design

Hello friends, In this blog, we are going to share another snippet on Bootstrap 5. Here we are making a responsive Bootstrap homepage. To create a homepage in HTML bootstrap, we used the latest version of Bootstrap 5 technologies. We have shared many snippets on HTML CSS, CSS animation examples, Webdesign, JavaScript, jQuery plugins implementation, frontend, and so on in this blog. Please make sure to check those as well if you want. For this project, please follow the below video tutorial and then come back to get the source code.

I hope you have watched the video and get some idea about the snippet we are making. The home page is the starting point for any website and, a web template gets its first impression from the Homepage. If the design of the home page is neat and well organized, the visitors will be more interested to see the whole website.

You May Also Like:

In this project, we have taken the navbar snippet from bootstrap 5 and made some changes like adding a class 'fixed-top so that the navbar remains sticky on top. After that, we have removed the unnecessary nav-items from the 'navbar-nav' unordered list and add a class 'ms-auto', so that the nav-items move to the right side of the viewport. We have also included a call-to-action button to the top-right side of the navbar so that the navbar looks more interactive. Then comes the carousel part. For making the bootstrap slider, we have taken the carousel snippet from the bootstrap website. After that, we have added a header, a paragraph text, and a call-to-action button. We don't want the paragraph to appear on the small devices. We have added some bootstrap classes 'd-none' and 'd-md-block' in the paragraph tag so that, it shows in the bigger devices, not the smaller ones. We have also implemented animate CSS in the project to make the text animate in every slide.

Bootstrap Homepage Template Design [ Source Code ]:

For creating this project, you have to create two files. One is HTML file with a .html extension and the other is CSS file with a .css extension. Add the necessary cdns like bootstrap, animate CSS, latest jQuery file in the HTML file. Also, add the external CSS file, or the project will not get its required styles. Copy the Source below and paste them to the appropriate files and save them.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--www.divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>bootstrap 5 homepage template</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;900&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
		<div class="container">
			<a class="navbar-brand" href="#"><span>Dazz</span>led</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link" href="#">Home</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">About</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Portfolio</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Services</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">Contact</a>
					</li>
					<li class="nav-item">
						<a class="getstarted" href="index.html">Get Started</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleIndicators">
		<div class="carousel-indicators">
			<button aria-label="Slide 1" class="active" data-bs-slide-to="0" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 2" data-bs-slide-to="1" data-bs-target="#carouselExampleIndicators" type="button"></button> <button aria-label="Slide 3" data-bs-slide-to="2" data-bs-target="#carouselExampleIndicators" type="button"></button>
		</div>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="..." class="d-block w-100" src="https://i.postimg.cc/2S3RGgyP/4.jpg">
				<div class="carousel-caption">
					<h5 class="animated fadeInDown" style="animation-delay: 1s">WordPress Theme</h5>
					<p class="animated fadeInUp d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated fadeInUp" style="animation-delay: 3s"><a href="#">Learn More</a></p>
				</div>
			</div>
			<div class="carousel-item">
				<img alt="..." class="d-block w-100" src="https://i.postimg.cc/2S3RGgyP/4.jpg">
				<div class="carousel-caption">
					<h5 class="animated fadeInDown" style="animation-delay: 1s">Joomla Theme</h5>
					<p class="animated fadeInUp d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated fadeInUp" style="animation-delay: 3s"><a href="#">Learn More</a></p>
				</div>
			</div>
			<div class="carousel-item">
				<img alt="..." class="d-block w-100" src="https://i.postimg.cc/2S3RGgyP/4.jpg">
				<div class="carousel-caption">
					<h5 class="animated fadeInDown" style="animation-delay: 1s">Magento Theme</h5>
					<p class="animated fadeInUp d-none d-md-block" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated fadeInUp" style="animation-delay: 3s"><a href="#">Learn More</a></p>
				</div>
			</div>
		</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleIndicators" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
	</script> 
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js">
	</script> 
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js">
	</script>
</body>
</html>

ADD CSS:

* {
	font-family: 'Montserrat', sans-serif;
}
.carousel-item {
	height: 100vh;
	min-height: 300px;
}
.carousel-caption {
	bottom: 220px;
	z-index: 2;
}
.carousel-caption h5 {
	font-size: 45px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 25px;
}
.carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 18px;
	line-height: 1.9;
}
.carousel-caption a {
	text-transform: uppercase;
	text-decoration: none;
	background: crimson;
	padding: 5px 20px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
	border-radius: 5px;
}
.carousel-inner:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1;
}
.navbar .getstarted {
	background: crimson;
	margin-left: 30px;
	border-radius: 4px;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	padding: .5rem 1rem;
	line-height: 2.3;
}
.navbar-nav a {
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
}
.navbar-light .navbar-brand {
	color: #000;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 2px;
}
.navbar-light .navbar-brand span {
	color: crimson
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
	color: #000;
}
.navbar-light .navbar-nav .nav-link {
	color: #000;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: #000;
}
.w-100 {
	height: 100vh;
}
.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #fff;
}
@media only screen and (max-width: 767px) {
	.navbar-nav {
		text-align: center;
	}
	.carousel-caption {
		bottom: 165px;
	}
	.carousel-caption h5 {
		font-size: 17px;
	}
	.carousel-caption a {
		padding: 10px 15px;
		font-size: 15px;
	}
	.navbar .getstarted {
		display: none;
	}
}

I hope you have successfully implemented the code. If you like this snippet, then consider subscribing to our channel and press the bell notification icon for future video notifications. Also, please follow us on our social media profiles so that you can stay connected with this blog. Thank you for stopping by.

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap Homepage Template Design

You might like

Post a Comment

Post a Comment

Contact Form