Course Content
Bootstrap 5 Alerts
0/1
Progress Bars
0/1
Spinners
0/1
Pagination
0/1
List Groups
0/1
Bootstrap 5 Scrollspy
0/1
Bootstrap
About Lesson

Vertical Navigation

.flex-column → Stacks nav items vertically

Example: Vertical Nav

HTML
<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Dashboard</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Settings</a>
  </li>
</ul>

Explanation:

  • .flex-column converts navigation into vertical layout.

Output: