Bootstrap 5 Hero Section design

In today's article, we will share another snippet with the bootstrap 5 framework. Before collecting the source code, have a look at the video tutorial below. You'll be able to understand the source code when you see this. There are hundreds of videos on front-end development on our YouTube channel. If you like what you see, you can subscribe to our channel.

Hope you have watched the video tutorial. Homepage or hero section is the front page of a website. When a user searches a website with a URL, the first page they see after loading is the homepage or hero section. This section contains the top label menu, image, title, headline, visuals etc. This element gives a user an idea of what the website is about. In this video, we show how to design a full-width hero section design using the Bootstrap 5 framework. Bootstrap 5 Carousel and Navabr are used here. In the case of the bootstrap carousel, only a text carousel is created keeping the background image static. If we use Bootstrap on any project we don't require a lot of extra CSS. This framework makes our work much easier. We have used a little CSS in our project. By watching the above video, you will understand how Bootstrap 5 HTML and CSS files are attached to our project, how Bootstrap 5 snippets are modified and our project is made.

You May also like:

Bootstrap 5 Hero Section design [ Source Code ]:

First, create an HTML file and then a CSS file. Then add Bootstrap CSS, HTML, and the latest jQuery CDN to your project. Then copy the code from the code box below and paste it into your project. Open the snippet in the browser and see if the code is working. If it does then it is ok and if not then download the code from the download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5 Hero Section</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="header">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center px-4">
  <div class="container">
    <a class="navbar-brand" href="#">Jhonson</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 text-white" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="#">About</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Portfolio</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Services</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Contact</a>
        </li>          
      </ul>
    </div>
  </div>
</nav>

<div class="container">
        <div class="row px-2">
            <div class="col-sm-12 col-md-6 col-lg-6 col-12 pt-5">

            <div id="carouselExampleControls" class="carousel slide pt-5" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <h1> I Am <span class="text-dark">Jhonson</span></h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, temporibus harum necessitatibus ipsum aut obcaecati.</p>
                  <button type="button" class="btn btn-dark text-white">Learn More</button>
                  <button type="button" class="btn btn-dark text-white">Contact Us</button>
               
                </div>
                <div class="carousel-item">
                  <h1>I Am a <span class="text-dark">UI/UX Design</span></h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, temporibus harum necessitatibus ipsum aut obcaecati.</p>
                  <button type="button" class="btn btn-dark text-white">Learn More</button>
                  <button type="button" class="btn btn-dark text-white">Contact Us</button>
               
                </div>
                <div class="carousel-item">
                  <h1>I Am a <span class="text-dark">Web Developer</span></h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, temporibus harum necessitatibus ipsum aut obcaecati.</p>
                  <button type="button" class="btn btn-dark text-white">Learn More</button>
                  <button type="button" class="btn btn-dark text-white">Contact Us</button>
               
                </div>
              </div>
            </div>

             </div>
       </div>
    </div>  
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ADD CSS:

.header {
	height: 100vh;
	background-image: url(1.jpg);
	background-size: cover;
	background-position: center;
}
.carousel-item {
	margin-top: 20%;
}
.carousel-item h1{
    color: #9c9c9c;
}

@media (min-width: 768px) and (max-width: 991px){
    .header {
	background-position: 68%;
}
}

Hope the code is working properly. Our website has many snippets related to front end development. Click on the Load More button on the homepage to explore them. If you like the content of the website, share it with like-minded people. Learn yourself and help others learn. Thank you very much for visiting our website.

DOWNLOAD CODE

Bootstrap 5 Hero Section design [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Hero Section design

Bootstrap 5 Hero Section design [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form