How To Create a Navigation Bar in Bootstrap
Today 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