Bootstrap 5 Homepage Design

Hello friends, today I have brought for you another snippet related to Bootstrap 5. Today's project is how we can create a responsive homepage using HTML CSS and bootstrap 5. We've shared over 1000 front-end related videos on our YouTube channel. You can watch those videos if you want. Before downloading the source code of this project, it is advisable to watch the video tutorial below. This will help you to understand the source code.

We hope you have watched the video tutorial once and understand how the project was created step by step following the Bootstrap 5 rule. The first thing a user sees after entering a website is the homepage of the website. There is a saying that the first impression is the best impression. In the case of a website, its homepage plays a very important role. So the more the homepage of the website is clean and minimal, the more the visitors are interested to explore the website more.

Before you start the project, you need to attach the CSS and js files of Bootstrap 5 to your project. Bootstrap 5 JQuery is not dependent, so even if you don't add JQuery Sydney for this project. But if you want to add more sections below and add a jquery plugin then you can add jquery CDN. But for now, it is not just for homepage design. Video tutorial shows how to create a homepage menu with a navbar template from the Bootstrap 5 website. We have also customized the bootstrap 5 carousel template and added images and text for the carousel caption. We have also added custom arrows as carousel control.

You may also like:

Bootstrap 5 Homepage Design [ Source Code ]:

Make two files before doing this project. One is the HTML file and, the other is the CSS file. When creating a file, add the file extensions properly. Then add the CSS and js CDN of Bootstrap 5 or its downloaded versions in the project. Then copy the code given in the code box below and paste it into your file. If you have a problem with the code below, you can download it from the download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Teko:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Bootstrap 5 Responsive Homepage Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#"><span>Vege</span>Shop</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" 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="#">vegetables</a>
              </li> 
              <li class="nav-item">
                <a class="nav-link" href="#">Garden</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
              </li>        
            </ul>
          </div>
        </div>
    </nav>

    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">            
            <div class="carousel-caption">
                <div class="row">
                    <div class="col-lg-5 col-md-12 col-12">
                        <div class="banner-info">
                            <h5>Organic Food is <br> Our Trademark</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
                <p><a href="#" class="btn mt-3">Learn More</a></p>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-12 col-12">
                        <div class="imgBox">
                            <img src="img/3.png" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="carousel-item">           
            <div class="carousel-caption">
                <div class="row">
                    <div class="col-lg-5 col-md-12 col-12">
                        <div class="banner-info">
                            <h5>Tasty & Healthy <br> Organic Food</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
                <p><a href="#" class="btn mt-3">Learn More</a></p>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-12 col-12">
                        <div class="imgBox">
                            <img src="img/1.png" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="carousel-caption">
                <div class="row">
                    <div class="col-lg-5 col-md-12 col-12">
                        <div class="banner-info">
                            <h5>Fresh Vegetables <br> From Garden</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nulla, tempore. Deserunt excepturi quas vero.</p>
                <p><a href="#" class="btn mt-3">Learn More</a></p>
                        </div>
                    </div>
                    <div class="col-lg-7 col-md-12 col-12">
                        <div class="imgBox">
                            <img src="img/3.png" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>
            </div>
          </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>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ADD CSS:

body {
	font-family: 'Teko', sans-serif;
}
.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: bold;
	letter-spacing: 2px;
}
.navbar-brand span {
	color: green;
}
.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;
}
.carousel-item {
	height: 100vh;
	min-height: 300px;
	background-color: #f7f5eb;
}
.carousel-caption {
	bottom: 0;
	z-index: 2;
	text-align: left;
}
.carousel-caption h5 {
	font-size: 45px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 25px;
	color: #262626;
}
.carousel-caption p {
	font-size: 18px;
	line-height: 1.9;
	color: #262626;
}
.banner-info .btn {
	padding: 10px 60px;
	font-size: 30px;
	text-transform: uppercase;
	color: #ffff;
	background: green;
}
.banner-info {
	padding-top: 25%;
}
.imgBox img {
	width: 650px;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
	height: 80px;
	width: 80px;
	outline: black;
	background-size: 100%, 100%;
	border-radius: 50%;
	background-image: none;
	color: #fff;
	background: green;
}
.carousel-control-next-icon:after {
	content: '->';
	font-size: 55px;
	color: #fff;
}
.carousel-control-prev-icon:after {
	content: '';
	font-size: 55px;
	color: #fff;
}
.carousel-indicators [data-bs-target] {
	background-color: green;
}
.navbar-light .navbar-toggler {
	color: #FFF;
	border-color: transparent;
	background: green;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.navbar-nav {
		text-align: center;
	}
	.navbar-collapse {
		background: green;
	}
	.carousel-caption {
		bottom: 370px;
	}
	.carousel-caption p {
		width: 100%;
	}
	.navbar-collapse .nav-link {
		color: #fff !important;
	}
	.carousel-caption {
		bottom: 0;
		text-align: center;
	}
}
@media only screen and (max-width: 767px) {
	.navbar-nav {
		text-align: center;
	}
	.navbar-collapse {
		background: green;
	}
	.navbar-collapse .nav-link {
		color: #fff !important;
	}
	.carousel-caption {
		bottom: 0;
		text-align: center;
	}
	.carousel-caption h5 {
		font-size: 17px;
	}
	.carousel-caption p {
		width: 100%;
		line-height: 1.6;
		font-size: 12px;
	}
	.banner-info .btn {
		padding: 0 15px;
		font-size: 20px;
	}
	.imgBox .img-fluid {
		max-width: 80%;
		height: auto;
	}
	.carousel-control-prev-icon, .carousel-control-next-icon {
		height: 50px;
		width: 50px;
	}
	.carousel-control-next-icon:after {
		font-size: 30px;
	}
	.carousel-control-prev-icon:after {
		font-size: 30px;
	}
}

I hope you have implemented the code correctly. We regularly share front-end-development-related snippets on our blog. Follow us on social media sites so you can stay connected with us. Share blog articles with like-minded people and students. Thanks for being by our side.

DOWNLOAD CODE

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Homepage Design

You might like

Post a Comment

Post a Comment

Contact Form