Create a Bootstrap 5 website design layout

When we create a website from scratch we need to make sure that the website's layout, images, and functionalities adjust smoothly to different screen sizes and devices. It is very important in modern-day web design. Nowadays, People use small devices in most cases when they are browsing any type of website. So, website design companies or website design agencies emphasize responsive web design rather than creating a static website. In this blog post, we will share a snippet on how to create a responsive website design layout using the latest version of Bootstrap. We have shared the video tutorial for your convenience. If you want to follow the video tutorial and code along, you can do so by watching the video tutorial below.

Video Tutorial:

We hope you have watched the video tutorial. If any user browses a website from a smartphone, tablet, or desktop computer, the responsive website will give a seamless experience. Bootstrap framework is used in our website design layout project. This framework is very popular among website developers. With this framework, we can easily create a website layout with some pre-made code snippets. We have tried to do that in today's project. You can understand it by completely following the above video tutorial.

When we build a website from scratch or create a website for a portfolio, we first create a website homepage. We have also developed a website homepage layout that is fully responsive and adjusts smoothly to different screen sizes and devices. This homepage layout has a navbar at the top and the bootstrap slider is used for the website banner. The background behind the slider will remain fixed, but the banner text will continue to slide.

You May Also like:

Create a Bootstrap 5 website design layout [ Source Code ]:

To create today's Bootstrap 5 website design layout, after creating the HTML and CSS files, you first need to add the Bootstrap 5 CSS and JavaScript CDN. The entire process is shown in the video tutorial above. After that, Copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if there are any problems. If the problem persists, you can download the code using the download button below the blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 5 Responsibe Website Layout design</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/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 fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">NewWay</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="#">Travel</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link text-white" href="#">Destination</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-12">

            <div id="carouselExampleControls" class="carousel slide pt-5" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item text-center active">
                  <h1> New Way Travel</h1>
                  <p>Lorem ipsum dolor sit amet</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 text-center">
                  <h1>Travel Destination</h1>
                  <p>Lorem ipsum dolor sit amet</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 text-center">
                  <h1>Holiday Destination</h1>
                  <p>Lorem ipsum dolor sit amet</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/bootstrap/5.2.0/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: #262626;
	font-family: "Great Vibes", cursive;
	font-size: 80px;
}
.carousel-item p {
	font-family: "Montserrat", sans-serif;
}
@media (min-width: 768px) and (max-width: 991px) {
	.header {
		background-position: 68%;
	}
	.carousel-item {
		margin-top: 50%;
	}
}
@media (max-width: 767px) {
	.carousel-item {
		margin-top: 45%;
	}
	.carousel-item h1 {
		font-size: 32px;
	}
}

According to a 2023 study, 50% of global web traffic will come from mobile or other small devices. Responsive web design is a must if you want to improve SEO rankings and enhance user experience. Hope you got the code. Click the Load More button on our homepage to get more of these types of codes. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Create a Bootstrap 5 website design layout [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Create a Bootstrap 5 website design layout

Video Tutorial:

Create a Bootstrap 5 website design layout [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form