WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Navs

~1 min read · Bootstrap
On this page
❮ Previous Next ❯

Navs in Bootstrap 5 provide a way to create navigational elements such as menus, tabs, or pill-style navigation.

Basic Nav:

Use the .nav class to create a basic navigation.

Example

Horizontal Alignment:

Use .justify-content-* classes to align nav items horizontally.

Center Alignment:
Right Alignment:
Example
Center Alignment:
Right Alignment:
Try it yourself

Vertical Nav:

Add the .flex-column class to create a vertical navigation.

Example
Try it yourself

Tabs:

Create a tabbed navigation using the .nav-tabs class.

Example
Try it yourself

Pills:

Create a pill-style navigation using the .nav-pills class.

Example
Try it yourself

Fill and Justify:

Use .nav-fill or .nav-justified to make the nav items span the full width of the container.

Fill:
Justified:
Example
Fill:
Justified:
Try it yourself

Dropdowns in Navs:

Combine dropdowns with navigation.

Example
Try it yourself

Working with Tabs & Panes:

Combine tabs with content panes using .tab-content and .tab-pane.

Home content
Profile content
Example
Home content
Profile content
Try it yourself

❮ Previous Next ❯