What is Bootstrap Navbar in Mobile web development ?
Last Updated :
07 Sep, 2022
Bootstrap is an open-source CSS framework that was developed by Mark Otto. Bootstrap is an HTML, CSS, and JavaScript framework. By using it, you can easily build mobile-first responsive websites. It provides you with many pre-set CSS styling for your web element, including navigation bars.
Bootstrap Navbar: A Navigation bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. Using Bootstrap, a navigation bar can extend or collapse, depending on the screen size you want. The navigation bar will be on one single line on large screens as it’s responsive. It helps for the quick design of prototypes.
CDN link: The following are the pre-compiled libraries will be used in the code for making the Bootstrap navbar:
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css” rel=”stylesheet”>
<link href=”https://getbootstrap.com/docs/5.2/assets/css/docs.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js”></script>
Approach: In order to create the responsive navbar, we require the <nav> tag containing the navbar class that enables to make the navbar. The navbar-expand-md attribute is used for making the responsive collapsing with different width depending on the device-width size. Then, add a navbar-toggle class to a button, then add data-toggle=”collapse”, then add an id to the list of links and add the name of that id inside data-target=”#mynav”. Then finally, wrap all the content of the navbar inside a div element with class collapse navbar-collapse. Now, add the list of item that is to be displayed in the navbar.
Example: This example describes the basic usage of the Bootstrap Navbar in Mobile web development.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Navbar</title>
<link rel="stylesheet" href=
bootstrap.min.css">
<script src=
</script>
<script src=
</script>
</head>
<body>
<nav class="navbar navbar-expand-md
bg-primary navbar-dark">
<div class="container">
<h1>
<a href="#" class="navbar-brand">
Bootstrap Navbar
</a>
</h1>
<button class="navbar-toggler"
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 text-center ">
<li class="nav-item">
<a class="nav-link active" href="#"> Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Topics </a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
|
Output:
Benefits of Bootstrap Navbar:
- Due to its user-friendliness, the development process gets faster.
- It will give you many amazing designs.
- The number of visitors to the website increases when it is designed on the Bootstrap framework.
Share your thoughts in the comments
Please Login to comment...