Bootstrap | Navigation Bar
In this article, we will learn to create a Navigation Bar. 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.
Navbar: Bootstrap provide various types of the navigation bar:
- Basic Navbar
- Inverted Navbar
- Coloured Navigation Bar
- Right-Aligned Navbar
- Fixed Navigation Bar
- Drop-Down menu Navbar
- Collapsible Navigation Bar
We will see separately:
Basic Navbar: First of all, we will initialize it by using a nav tag which is an inbuilt tag just like the paragraph tag and the header tags. Within this tag, we will call the class=”navbar navbar-default” which are the inbuilt classes of the bootstrap that give the top space of your web page to your navigation part and the default part is for the default view of that bar which is white in color.Then going further,we will have two div tags one class=”container-fluid” and the other class=”navbar-header”. These classes are basically for the navigation bar to take the full upper width of the page and then we add the homepage and the other links to it.
Inverted Navbar: It is quite similar to what we studied earlier in the Basic Navbar section. The change comes inside the class associated with the nav tag i.e. instead of the navbar-default we will use the navbar-inverse and the colors of the navigation bar get inverted.
Coloured navigation Bar : In Bootstrap 4, To change the background colour of the navigation bar we can use various classes with the nav tag-
- .bg-primary – Blue
- .bg-success – Green
- .bg-warning – Yellow
- .bg-danger – Red
- .bg-secondary – Grey
- .bg-dark – Black
- .bg-light – White
Use .bg-color class to change the color of the navbar to the above-listed colors.
Right-Aligned Navbar: By default, the links on a navigation bar are arranged on the left, To arrange the links on the right side of the navigation bar In this section, we will see that in the navigation bar not only the space on the left but also in the right can be used. This makes the navigation bar much more interactive. The change comes inside the last div tag in which the list is present to be shown on the navbar. We simply add a new class in the already existing class i.e. class= “nav navbar-nav” and we add navbar-right to it. Now we can see the content on the right side of the navigation bar too. The content that will be written last will appear closer to the center of the screen.
Fixed Navigation Bar: We can fix a navigation bar at the top of the webpage so that, if you scroll down that webpage you can still view the navigation bar from any position on the page. Scroll down the GeeksForGeeks HomePage to see this effect.
To make a navigation bar fixed at the top of the webpage, add a navbar-fixed-top class to the navbar like this :
Drop-Down Menu Navbar: This is a good approach to be used in designing a navigation bar because if we are creating a website that has a lot of content in it and is quite big to scroll then we can use this approach. The benefit of this approach is that the whole navigation bar does not get occupied with these links. In this, the only change is the introduction of a drop-down menu after the addition of the homepage. We will initialize a div tag with class=”dropdown” to make a drop-down interface and after that, we can add the content to it.
Collapsible Navigation Bar: To hide links on the navigation bar and make them visible after clicking a button, we add a collapsible navigation bar.
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=”#id”. Then finally, wrap all the content of the navbar inside a div element with class collapse navbar-collapse
- Google Chrome
- Internet Explorer