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.
- How to use Top Navigation with Left Navigation Bar using Bootstrap ?
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- How to change navigation bar color in Bootstrap ?
- How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to create Vertical Navigation Bar using HTML and CSS ?
- Creating Responsive Grid Vanilla using HTML,CSS and Bootstrap
- How to make whole area of a list item in navigation bar is clickable using CSS ?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Responsive images in Bootstrap with Examples
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to make the existing bootstrap 2 table responsive?
- How to force tab-navigation to stay in place using Bootstrap ?
- How to place content under fixed flexbox navigation bar ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.