Post
Ask Question

How To Create Nav Bar And Carousel Slider In Bootstrap 4

Introduction
 
In this article, I am going to explain how to use the Bootstrap 4 navbar and carousel slider in your project. The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive meta components that serve as navigation sites for your application site. Navbar collapses in mobile views and becomes horizontal as width increases. On the other hand, a carousel is a slideshow of a series of content. It also includes support for previous/next controls and indicators. 
 
To use Bootstrap 4 in your project, you need to have the following downloaded or cdn scripts. It should be added in a <head> tag.
  1. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">  
  2.       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>  
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>  
  4. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" ></script>  
Default Navbar
 
To create default navbar add the following classes,
  1. Add the classes .navbar, .navbar-default to the <nav> tag.
  2. Add header class .navbar-header  or .containert fluid to the <div> element. Include an <a> element with class .navbar-brand. You can add logo of the brand or any text with larger size.
  3. Add classes like .navbar-collapse to hide or display any content.
  4. Add classes like .navbar-nav, .nav-link, and .nav-item for unordered list with links.
Add the  following code to create the responsive navigation bar in your project.
  1. <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">  
  2. <div class="container-fluid">  
  3.    <a class="navbar-brand" href="#"> <i class="fa fa-Heart " style="color:white;font-size: 30px;">Webco</i></a>  
  4.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynav">  
  5.     <span class="navbar-toggler-icon"></span></button>  
  6.       
  7.         <div class="collapse navbar-collapse" id="mynav">  
  8.         <ul class="navbar-nav ml-auto">  
  9.            <li class="nav-item active" >  
  10.               
  11.             <a  class="nav-link" href="#">Home</a>  
  12.             </li>  
  13.             <li class="nav-item " >  
  14.               
  15.             <a  class="nav-link" href="#">About Us</a>  
  16.             </li>  
  17.             <li class="nav-item" >  
  18.               
  19.             <a  class="nav-link" href="#">Service</a>  
  20.             </li>  
  21.             <li class="nav-item" >  
  22.               
  23.             <a  class="nav-link" href="#">Plans</a>  
  24.             </li>  
  25.             <li class="nav-item" >  
  26.               
  27.             <a  class="nav-link" href="#">Connect us</a>  
  28.             </li>  
  29.             </ul>  
  30.          </div></div></nav> 
Output of responsive navbar
 
Create Nav Bar and Carousel Slider In Bootstrap 
 
Navbar collapses in mobile view and the toggle button holds the list of contents. The original content is displayed in expanded screen size.
 
Create Nav Bar and Carousel Slider In Bootstrap 
 
Carousel slider
 
Carousel is a  slideshow for cycling through a series of content, built with CSS 3D transforms. Be sure to add a unique ID while using multiple carousels on a single page. 
 
Carousel indicator
 
You can also add indicators to the carousel, alongside the controls, too. 
 
Classes in Carousel control
  1. Create class .carousel, add data attributes like data-ride and unique id.
  2. In order, list creates class .carousel indicators, and add data attributes like  data-slide-to  it used to specify which slide to go. Mention the unique id in data-target attribute.
  3. Add class .carousel-inner to add slides to the carousel.
  4. Add class .carousel-item to specifies the content of each items. Here, use <image> tag, add images required to display in carousel slide.
  5. Add class .carousel caption to specify the carousel caption. 
Follow the code given below to create carousel slider in your project.
  1. <div id="slides" class="carousel slide" data-ride="carousel">  
  2.     <ol class="carousel-indicators">   
  3.         <li data-target="#slides" data-slide-to="0" class="active"></li>  
  4.         <li data-target="#slides" data-slide-to="1" ></li>  
  5.           
  6.     </ol>  
  7.     <div class="carousel-inner">  
  8.         <div class="carousel-item active">  
  9.         <img src="bgper.jpg" width="100%" height="100%">  
  10.             <div class="carousel-caption">  
  11.             <h1 class="display-2">World of Peace</h1>  
  12.             <h3 >Live Happy</h3>  
  13.             <button type="button" class="btn btn-outline-light btn-lg">Login</button>  
  14.             <button type="button" class="btn btn-primary btn-lg">Signin</button>  
  15.             </div>  
  16.         </div>  
  17.         <div class="carousel-item" style="width: 100%">  
  18.         <img src="wall484.jpg" width="100%" height="100%">  
  19.         </div>  
  20.         </div> </div>  
Output of carousel slider with carousel indicator and carousel caption.
 
Create Nav Bar and Carousel Slider In Bootstrap 
 
By default, the slide 1 of the carousel slider is set to be active. When indicators are clicked, the carousel slides to the corresponding slides.
 
Create Nav Bar and Carousel Slider In Bootstrap 
 
Summary
 
In this basic article, you saw how to use carousel slider and navbar to create a responsive webpage using Bootstrap 4. Hope you found this article interesting. For any feedback, please post your comment at the bottom of this article. Thank you!


Similar Articles