Bootstrap 5 Layout with Animated Background

Responsive web design is a practice used by developers in web design to ensure optimal viewing experience on different platforms such as desktops, tablets, and mobile phones. To accommodate the wide range of devices used to access the Internet, the importance of responsive web design cannot be overstated. Today we will create a responsive website design layout with Bootstrap 5, the latest version of Bootstrap. The CSS keyframe animation property is used to create background animation or animated background in this snippet. The video below shows the complete coding process. Watch the video before collecting the code.

Video Tutorial:

Hope you have watched the video tutorial on Bootstrap 5 Responsive Website Layout with Background Animation. More people access the Internet on mobile devices these days than ever before. A website that is accessible and functional across all these devices is much more acceptable to users. Besides, a responsive website is necessary to improve search engine ranking and visibility on search engines like Google. Responsive web design makes a website future-proof as these websites can easily adapt to devices of any size in the future.

We used the Bootstrap 5 framework to design the entire layout. As you all know, Bootstrap is a powerful open-source toolkit for building responsive and mobile-first websites or web applications. Our responsive homepage layout is designed using Bootstrap 5's pre-built CSS and JavaScript elements. Background animations or animated backgrounds are used to enhance the visual appeal of a website. Our homepage layout has a background animation loop with gradient colors. Linear gradient colors used as the background of the snippet will animate smoothly from left to right at a 45-degree angle.

You May Also Like:

Bootstrap 5 Layout with Animated Background [ Source Code ]:

To create this Bootstrap layout with a background animation snippet, first, add Bootstrap 5's CSS and JS CDN to the HTML file. Next, Google Fonts CDN needs to be added. Then add the external CSS file to the HTML file. After that copy the code from the code box below and paste it into your files. If you want you can download the complete code from the download button below.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">  
    <title>Bootstrap 5 Resposnive web design with Background Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&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 bg-light text-center fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">prezzo</a>
    <button class="navbar-toggler bg-white" 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="#">Services</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link" href="#">Portfolio</a>
        </li> 
        <li class="nav-item">
          <a class="nav-link" 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>Website Design</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sint tenetur magnam quidem nisi qui?</p>
                  <button type="button" class="btn btn-light text-dark">Learn More</button>
               
                </div>
                <div class="carousel-item text-center">
                  <h1>Graphics Design</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sint tenetur magnam quidem nisi qui?</p>
                  <button type="button" class="btn btn-light text-dark">Learn More</button>
               
                </div>
                <div class="carousel-item text-center">
                  <h1>UI / UX Design</h1>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum sint tenetur magnam quidem nisi qui?</p>
                  <button type="button" class="btn btn-light text-dark">Learn More</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: linear-gradient(45deg,#3282a6, #ff6b6b, #0000ff);
	background-size: 400% 400%;
	animation: animate 3s infinite alternate;
}
.navbar{
	background: transparent !important;
}
.navbar-brand{
	color: #fff;
	font-family: "Bebas Neue", sans-serif;
	font-size: 30px;
}
.navbar-brand:focus, 
.navbar-brand:hover {
	color: #fff !important;
}
.nav-link{
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
}
.carousel-item {
	margin-top: 20%;
}
.carousel-item h1{
    font-size: 7em;
	color: #fff;
  font-family: bebas neue;
}
.carousel-item p{
	font-size: 1.2em;
  margin-bottom: 20px;
  color: #fff;
  font-family: montserrat;
  padding: 0 25%;
  line-height: 1.5;
}
@keyframes animate {
	0% {
		background-position: 0% 50%; 
	}
	100% {
		background-position: 100% 50%;
	}
}
@media (min-width: 768px) and (max-width: 991px){
    
.navbar-nav {
	background: #fff;
}
.nav-link{
	color: #262626;
}
.carousel-item {
	margin-top: 50%;
}
.carousel-item p {
	padding: 0 10%;
}
}

@media (max-width: 767px){
	.navbar-nav {
		background: #fff;
	}
	.nav-link{
		color: #262626;
	}
	.carousel-item {
		margin-top: 45%;
	}
	.carousel-item h1 {
		font-size: 40px;
	}
	.carousel-item p {
		font-size: 1em;
		padding: 0 2%;
	}
}

Hope the code you got is working properly. Today's snippet is an example of a visually stunning, engaging, and memorable homepage experience. To get more snippets like this, click the Load More button at the bottom of our homepage. Hope you find a snippet you like. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Bootstrap 5 Layout with Animated Background [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Layout with Animated Background

Video Tutorial:

Bootstrap 5 Layout with Animated Background [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form