The method of making a vertical navigation bar in Bootstrap is as follows: 1. Use the flex-column class to change the default horizontal navigation to vertical arrangement, with the structure code

; 2. Add p-3, mb-2 and other classes to optimize spacing and margins, and use bg-light and text-dark to adjust colors to improve appearance; 3. Optionally add icons (such as Bootstrap Icons) or static submenu to enhance functions and visual effects. These steps allow you to quickly build a responsive and uniformly styled vertical side navigation bar.



Making a vertical navigation bar is actually quite straightforward in Bootstrap, especially with its built-in classes and structures. You don't need to write too much extra code to quickly create a responsive and uniform side navigation.



Infrastructure: Vertical arrangement using flex-column

Bootstrap's navigation component is horizontal by default, but it can be changed to the vertical direction by adding a flex-column class.

 <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact</a>
  </li>
</ul>

• nav is the basic class that controls the overall style;
• flex-column changes the layout from horizontal to vertical;
• Each nav-item is a menu item;
• nav-link is the link style.

What is written in this way is a simple vertical navigation bar with no background color or spacing, which is suitable for use in the sidebar area for other layouts.



Add styles and spacing

The default vertical navigation looks a bit compact, and you can make the appearance look better in a few ways:

• Add p-3 or py-2 to .nav to increase the margin;
• Add mb-2 to each nav-link so that there is a gap between the entries;
• Use Bootstrap's color classes, such as bg-light or text-dark , to adjust the background and text colors;

Example:



 <ul class="nav flex-column bg-light p-3">
  <li class="nav-item mb-2">
    <a class="nav-link text-dark" href="#">Home</a>
  </li>
  <li class="nav-item mb-2">
    <a class="nav-link text-dark" href="#">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link text-dark" href="#">Contact</a>
  </li>
</ul>

The navigation made in this way is closer to the style requirements in actual projects and looks more professional.

Optional feature: Add icon or submenu

If you want to do more, you can consider adding icons or lower menus.

• Icons can be used with FontAwesome or Bootstrap Icons;
• The submenu can be implemented with nested ul , but you need to write a little CSS or JS control by yourself to expand and close;
• If it is just a static page, it is recommended to be simpler and not to make too complicated functions;

To give a small example (without interaction):

 <ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><i class="bi bi-info-circle"></i> About us</a>
  </li>
</ul>

Here we use the icon library of Bootstrap Icons, and the visual effect will be clearer and more intuitive after adding the icon.

Basically that's it. As long as you master the basic structure and add styles and functions according to project requirements, you can create a practical vertical navigation bar.

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