How To Create a Navigation Bar in Bootstrap
By Saurabh SinghToday in this Bootstrap related post, we will learn, how to create a navigation bar in Bootstrap. A navigation bar is just like a header which is generally placed at the top of the page. In Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A default navigation bar is created with <nav class=”navbar navbar-default”>.
How to create a Navbar using Bootstrap
- First, we have to create a class named as nav.
- After that, add classes as per your need what type of navbar you want. I have used .navbar navbar-default and .navbar-fixed-top for the bootstrap default setting for the navbar and for fixed at the top respectively.
- Now create a div named as the container.
- In the container create an unordered list and write all the things which you need at the navigation bar.
- And at last, style the nav class and container as per your requirement.
Navbar Classes in Bootstrap
| Class | Size of Viewport |
| .nav .navbar-nav | Used on an unordered list that contains the list items with links inside a navigation bar. |
| .active | Used for to add the gray color background to the active link in default navbar in Bootstrap. |
| .navbar
| Creates a default navigation bar. |
| .navbar-brand | Used to add a link or header element, to add the logo or header. |
| .navbar-btn | Aligns the buttons inside a navbar in vertical order |
| .navbar-collapse | For making navbar collapsable. (hidden and replaced with a menu on mobile phones or in small viewport device) |
| .navbar-default | Creates a default navigation bar. (light-grey background color) |
| .navbar-inverse | Creates a black navigation bar. (color of navbar becomes light-grey) |
| .navbar-fixed-top | For navbar to be fixed at the top of the screen. |
| .navbar-fixed-bottom
| For navbar to be fixed at the bottom of the screen. |
| .navbar-toggle | Styles the button which will open the navbar on small screens. |
Here I am providing the code to get a navbar. You can customize it to make changes in the navbar, you can modify in the header to get the change in list group.
Also read,
- List group in Dropdown Menu in Mobile Size or otherwise it appears on Navbar
- How to create a Tab Image Gallery – HTML, CSS, and JavaScript
Sample code to create nav bar in bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body { padding-top: 70px;
margin: 110px;
font-style: sans-serif;
font-size: 15px;
}
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div id="navbar">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
</div>
</div>
</nav>
<h1>Top 5 Most Important Things in Life/h1>
<p>
<h2> Health</h2> <br>some texts</p>
<br>
<p><h2> Family</h2> <br>some texts</p>
<br>
<p><h2> Friends</h2> <br>some texts.</p>
<br>
<p><h2> Purpose</h2> <br>some texts</p>
<br>
<p><h2> Freedom</h2> <br>some texts.</p><br>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Leave a Reply