Bootstrap 4 Navbar with Slider

The Homepage is the default page of any website. When someone visits a particular website address, this is the main page see at the very first moment. We can call it the starting point of the website. The website's Homepage is much more important than we think. It creates the first impression among the visitors and encourages them to visit the rest of the website. This blog will share a snippet based on creating a responsive homepage design with Bootstrap four and animate CSS.

Bootstrap is one of the most potent open-source and free HTML CSS and js framework for developing responsive website design. It consists of lots of design templates on the navigation bar, forms, carousels, buttons, etc. Indeed Bootstrap saved hundreds of hours of the developers to create a website. Bootstrap has got a couple of versions available, and for this snippet, we will use the four versions. I will encourage you to follow the below tutorial from start to finish and have some idea about the coding that has been used to do this project.

I hope you have watched the entire video and understand the necessary coding behind it. I have first linked the Bootstrap four CDN, jquery CDN, and animate CSS CDN in the project. After that, you have to click the top bar's documentation, and then from the left menu, click on components. Select the navbar from there. I have applied the default navbar template from there in my project. Now initially, the navbar will contain a logo, a left navbar, and a search box. I eliminated the search box codes and all nav items of the left navbar; apart from 'Home, I created my navbar, adding some more nav items like about, portfolio, services, and contact. I have added a bootstrap four class called 'ml-auto' to the unordered list 'navbar-nav,' This class will take the left navbar to the right.

You may also like:

From the Bootstrap four website components, I have clicked the carousel and copied the carousel code with captions and indicators. Then I have added some random images for the carousel. I have also added a header text, some paragraph text, and a call-to-action button.

Let's Move to the CSS. First, I have given the 'carousel-item' class a height of 100vh and a minimum height of 300px. Initially, the caption text will be a the bottom of the webpage, but for moving it in the middle of the carousel, I have given a bottom value of 220px for the 'carousel-caption' class. After that, I have applied some basic CSS to style the rest of the project elements. I have also made some changes in styling for the project's responsive looks in the small devices. Now for making the carousel caption-text animating, I took the help of animate CSS. I have added the animation of my choice for each element of the carousel caption. Now the problem is all items are animating at the same time. For making the item animate one by one, I have added an animation-delay value for each element.

Bootstrap 4 Homepage with text animation ( Source Code ):

for creating this project, you have to create an HTML and CSS file and put the codes below in those, and save. Make changes according to your choice if necessary.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Responsive Homepage design with Bootstrap 4 and Animate css</title>
	<link href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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 fixed-top">
		<div class="container">
			<a class="navbar-brand" href="#">Creativo</a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav ml-auto">
					<li class="nav-item active">
						<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>
				</ul>
			</div>
		</div>
	</nav>
	<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
		<ol class="carousel-indicators">
			<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
			<li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
			<li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img alt="First slide" class="d-block w-100" src="https://i.postimg.cc/Jn0X0pDS/1.jpg">
				<div class="carousel-caption d-none d-md-block">
					<h5 class="animated bounceInRight" style="animation-delay: 1s">Web Development</h5>
					<p class="animated bounceInLeft" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated bounceInRight" style="animation-delay: 3s"><a href="#">More Info</a></p>
				</div>
			</div>
			<div class="carousel-item">
				<img alt="Second slide" class="d-block w-100" src="https://i.postimg.cc/SQXZtrTZ/2.jpg">
				<div class="carousel-caption d-none d-md-block">
					<h5 class="animated slideInDown" style="animation-delay: 1s">web design</h5>
					<p class="animated fadeInUp" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated zoomIn" style="animation-delay: 3s"><a href="#">More Info</a></p>
				</div>
			</div>
			<div class="carousel-item">
				<img alt="Third slide" class="d-block w-100" src="https://i.postimg.cc/Jh4x3cH5/3.jpg">
				<div class="carousel-caption d-none d-md-block">
					<h5 class="animated zoomIn" style="animation-delay: 1s">Digital Marketing</h5>
					<p class="animated fadeInLeft" style="animation-delay: 2s">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
					<p class="animated zoomIn" style="animation-delay: 3s"><a href="#">More Info</a></p>
				</div>
			</div>
		</div><a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" data-slide="next" href="#carouselExampleIndicators" role="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
	</div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
	</script> 
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
	</script>
</body>
</html>

ADD CSS

.carousel-item {
	height: 100vh;
	min-height: 300px;
}
.carousel-caption {
	bottom: 220px;
}
.carousel-caption h5 {
	font-size: 45px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 25px;
	font-family: merienda;
}
.carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 18px;
	line-height: 1.9;
	font-family: poppins;
}
.carousel-caption a {
	text-transform: uppercase;
	background: #262626;
	padding: 10px 30px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
}
.navbar-nav a {
	font-family: poppins;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: bold;
}
.navbar-light .navbar-brand {
	color: #fff;
	font-size: 25px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	color: #fff;
}
.navbar-light .navbar-nav .nav-link {
	color: #fff;
}
.navbar-nav {
	text-align: center;
}
.nav-link {
	padding: .2rem 1rem;
}
.nav-link.active, .nav-link:focus {
	color: #fff;
}
.navbar-toggler {
	padding: 1px 5px;
	font-size: 18px;
	line-height: 0.3;
	background: #fff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
	color: #fff;
}
.w-100 {
	height: 100vh;
}
@media only screen and (max-width: 767px) {
	.navbar-nav.ml-auto {
		background: rgba(0, 0, 0, 0.5);
	}
	.navbar-nav a {
		font-size: 14px;
		font-weight: normal;
	}
}

I hope you liked the project. Please follow the social media profiles of this blog to stay connected with this blog. Thanks for stopping by, and keep visiting.

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 4 Navbar with Slider | Homepage Design

You might like

Post a Comment

Post a Comment

Contact Form