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.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
<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,

Add the classes .navbar, .navbar-default to the <nav> tag.
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.
Add classes like .navbar-collapse to hide or display any content.
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.

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"> <i class="fa fa-Heart " style="color:white;font-size: 30px;">Webco</i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynav">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="mynav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active" >
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item " >
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#">Plans</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#">Connect us</a>
</li>
</ul>
</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.

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

Create class .carousel, add data attributes like data-ride and unique id.
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.
Add class .carousel-inner to add slides to the carousel.
Add class .carousel-item to specifies the content of each items. Here, use <image> tag, add images required to display in carousel slide.
Add class .carousel caption to specify the carousel caption.

Follow the code given below to create carousel slider in your project.

<div id="slides" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="bgper.jpg" width="100%" height="100%">
<div class="carousel-caption">
<h1 class="display-2">World of Peace</h1>
<h3 >Live Happy</h3>
<button type="button" class="btn btn-outline-light btn-lg">Login</button>
<button type="button" class="btn btn-primary btn-lg">Signin</button>
</div>
</div>
<div class="carousel-item" style="width: 100%">
<img src="wall484.jpg" width="100%" height="100%">
</div>
</div> </div>

Output of carousel slider with carousel indicator and carousel caption.

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.

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!