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.
The word “Navigation” means the science of moving from one place to another. In this article, we create a navigation bar on the bottom of the web page. The navigation at the bottom of the web page or website which can be either fixed or moving and can be adjusted in all types of screen sizes. This article deals with the process of creating a “Responsive Bottom Navigation” in Bootstrap.
Example 1: In this code, we create a navigation menu and fix it at the bottom of the page. It is one of the easiest ways to have bottom navigation. The class “fixed-bottom” sticks the navbar to the page bottom.
- Navbar on small screens:
- Navbar in large screen:
Example 2: In the above code, we saw how we fixed a simple navigation menu at the bottom of the page. In this example we place a vertical pill having a menu at the bottom of the page that can be navigated.
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- How to change navigation bar color in Bootstrap ?
- Responsive images in Bootstrap with Examples
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- How to create a responsive Modal Sign-Up form for a Website?
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
- How to create footer to stay at the bottom of a Web page?
- How to create five equal columns in Bootstrap ?
- Include Bootstrap in AngularJS using ng-bootstrap
- HTML Course | Creating Navigation Menu
- HTML & CSS | Tabindex attribute & Navigation bars
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.