×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Navbar


If in our webpage we want to create navigation bar so we can do it easily with help of .navbar class.
Let’s understand this by the following program:-


Basic navbar


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link 1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>


<div class="container-fluid">

<p>Example of basic navbar.</p>

</div>

</body>

</html>

Output of this Program


bootstrap 5 Example

So our navigation bar is ready.



Color Navigation Bar


We can also give background color to our navigation bar.
Let’s understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h3>Colored navbar</h3>

</div>

<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
</ul>
</nav>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active </a>
</li>
</ul>
</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active </a>
</li>
</ul>
</nav>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active </a>
</li>
</ul>
</nav>

<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active </a>
</li>
</ul>
</nav>

</body>

</html>

Output of this Program


bootstrap 5 Example

Colored navbar

When using the .navbar-brand class on images



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="navbar-brand" href="#">

<img src="images.png" alt="logo" style="width:60px;">

</a>

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link 1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

</nav>

</body>

</html>

Output of this Program


bootstrap 5 Example

Navbar Forms and Buttons



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">

<a class="navbar-brand" href="#">

<img src="images.png" alt="logo" style="width:60px;">

</a>

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link 1</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 2</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link 3</a>

</li>

</ul>

<form class="form-inline ml-5" action="#">

<input class="form-control mr-sm-2" type="text" placeholder="Search">

<button class="btn btn-success" type="submit">Search</button>

</form>

</nav>

</body>

</html>

Output of this Program


bootstrap 5 Example

Here we just change the color of our navigation bar.





Responsive Navigation Bar


We can also create responsive navigation bar.
Let’s understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">

<a class="navbar-brand" href="#">Navbar</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar1">

<span class="navbar-toggler-icon"></span>

</button>

<div class="collapse navbar-collapse" id="collapsibleNavbar1">

<ul class="navbar-nav">

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Link</a>

</li>

</ul>

</div>

</nav>

<br>

</body>

</html>

Output

Bootstrap Example



Bootstrap 5 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute