×

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 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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



Example of basic navbar.

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 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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


Colored navbar


When using the .navbar-brand class on images



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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


Navbar Forms and Buttons



<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

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

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.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


Here we just change the color of our navigation bar.








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