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 create responsive image gallery using HTML, CSS, jQuery and Bootstrap?
- How to create responsive website zoomed out to full width on mobile using Bootstrap?
- Bootstrap | Navigation Bar
- Bootstrap 4 | Navigation Bar
- Responsive images in Bootstrap with Examples
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- How to change navigation bar color in Bootstrap ?
- Responsive Video or Slideshow Embeds in Bootstrap with Examples
- How to design Responsive card-deck with fixed width in Bootstrap ?
- How to create a responsive Modal Sign-Up form for a Website?
- How to Create Animated Navigation Bar with Hover Effect using HTML and CSS ?
- How to set Bootstrap 4 scroll to the bottom of long sticky sidebar?
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.