Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Creating a Navigation Bar with Bootstrap

A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

To add links inside the navbar, use a <ul> element with class=”navbar-nav”. Then add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:

Here is a very simple example.

</pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Menu</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.4.0/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="#">Varanasi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lucknow</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kanpur</a>
</li>
</ul>
</nav>
<br>

</body>
</html>
<pre>

This will make it expand vertically at sm size.

 

 

Remove the Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar.

 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Menu</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.4.0/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 bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Varanasi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lucknow</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kanpur</a>
</li>
</ul>
</nav>
<br>

</body>
</html>

 

Collapsible Menu

To create a collapsible menu you make it hidden on smaller screens. This is done by writing something like

.navbar-expand-md

 

Then add a toggle button

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#mynavbar”>
<span class=”navbar-toggler-icon”></span>
</button>

 

 

Then add a div with the id mynavbar

Here is the complete code.
</div>
<div></div>
<div>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Collapsible Menu</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.4.0/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-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Varanasi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lucknow</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kanpur</a>
</li>
</ul>
</div>
</nav>
<br>

</body>
</html>

</div>
<div></div>
<div>

 

 

end

Leave a Reply

Your email address will not be published. Required fields are marked *