The key to making the Bootstrap bottom navigation bar is to have a clear structure and correct style. First, use the nav elements to cooperate with the .nav and .nav-pills classes to build the basic structure, and use fixed-bottom to fix the navigation at the bottom; second, arrange the ul and li elements in HTML, and combine the active classes to select highlights; then, use mx-auto to center the content, and optimize the visual effects to the mobile terminal adaptation with the Font Awesome icon and responsive class; finally, pay attention to avoid using navbar-nav and deal with content occlusion and compatibility issues caused by fixed positioning, so as to achieve a practical and beautiful bottom navigation bar.

It is actually not difficult to make the Bootstrap bottom navigation bar, the key is the clear structure and correct style. As long as you master the basic HTML structure and how to use Bootstrap classes, you can quickly implement a responsive bottom navigation.

Basic structure: use nav nav-pills or nav-tabs

Bootstrap's navigation components are usually built based on the <nav></nav> element and .nav class. To create a bottom navigation, .nav-pills is recommended because it is more suitable for button navigation in vertical or horizontal arrangements.

The HTML structure is roughly as follows:

 <nav class="navbar fixed-bottom bg-light">
  <ul class="nav nav-pills mx-auto">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Category</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">My</a>
    </li>
  </ul>
</nav>

• Use fixed-bottom to fix navigation at the bottom of the page.
• mx-auto is to center the navigation content.
• If you want the selected item to be highlighted, remember to add the active class.

Style adjustment: adapted to mobile terminal and beautiful processing

Although Bootstrap provides default styles, sometimes we want the navigation to look more like the "bottom tab bar", such as a style similar to the mobile app.

You can consider the following points:

• Use smaller fonts and icons, such as Font Awesome:

   <a class="nav-link" href="#">
    <i class="fas fa-home"></i>
    <span class="d-block">Home Page</span>
  </a>

• Set the width of .nav-link to be consistent to avoid the text length affecting the layout.

• Hiding text on mobile only shows icons (or vice versa). You can use Bootstrap's responsive tool class such as d-none d-md-block .

• Adjust padding and margin to make the overall vision more compact.

Note: Don't step on these pitfalls

1. Don't use navbar-nav directly
   Because .navbar-nav is arranged vertically by default, while bottom navigation usually requires horizontal arrangement, it is recommended to use .nav with .nav-pills directly.

2. Fixed positioning causes content to be blocked
   After using fixed-bottom , the content of the page may be blocked by the navigation bar. You can add a margin-bottom to the main content area, which is slightly larger than the navigation bar height.

3. Compatibility issues
   In some older browsers, the flex layout may behave abnormally, and it is recommended to test mainstream devices and browsers.

Basically that's it. Following the above structure and method, you can easily create a practical and beautiful bottom navigation bar in Bootstrap.

The above is the detailed content of How to make a bottom navbar in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!