Lesson 20: Navs in Bootstrap 5

Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software. Below is how to use Navs in Bootstrap 5 .

Navigation Menu

If you want to create a simple horizontal menu, add a class .nav to the element, followed by a class .nav-itemfor each element.

and add classes .nav-linkto their links. Basic code:

• Link
• Link
• Link
• Disabled

For example:

 Bootstrap Example 

Nav

Basic horizontal menu for Tipsmake.com:

• Link
• Link
• Link
• Disabled

Adjust Navigation Menu

Add classes .justify-content-centerto adjust the navigation menu to be centered and class .justify-content-endto adjust it to be on the right. Basic code:

For example:

 Bootstrap Example 

Nav for TipsMake.com in Bootstrap

Left-hand navigation menu (default):

• Link
• Link
• Link
• Disabled

Navigation menu in the middle:

• Link
• Link
• Link
• Disabled

Right-hand navigation menu:

• Link
• Link
• Link
• Disabled

Vertical Navigation Menu

Add a class .flex-columnto create vertical navigation. Basic code:

For example:

 Bootstrap Example 

Vertical Navigation for TipsMake.com

• Link
• Link
• Link
• Disabled

Tab

Transform the nav menu into navigation tabs using the class .nav-tabs. Add the class .activeto the active/current link. If you want the tabs to be switchable, try applying the basic code below:

• Active
• Link
• Link
• Disabled

For example:

 Bootstrap Example 

Navigation Tab for Tipsmake.com

• Active
• Link
• Link
• Disabled

Pills

Transform the navigation menu into navigation pills (similar to buttons) using the `` class .nav-pills. If you want to convert the pills, follow this basic code:

• Active
• Link
• Link
• Disabled

For example:

 Bootstrap Example 

Navigation Buttons for Tipsmake.com

• Active
• Link
• Link
• Disabled

Align Tab/pill

Align tabs/pills using the same class .nav-justified(same width):

..

For example:

 Bootstrap Example 

Align Navigation Tabs/pills for Tipsmake.com

Use the `.nav-justified` class to align the button-based navigation menu:

• Active
• Link
• Link
• Disabled

Align all tabs:

• Active
• Link
• Link
• Disabled

Pill with Dropdown Menu

Sample code:

• Active
• Dropdown
  • Link 1
  • Link 2
  • Link 3
• Link
• Disabled

For example:

 Bootstrap Example 

Tab-based Buttons with Dropdown Menus for QTM

• Active
• Dropdown menu
  • Link 1
  • Link 2
  • Link 3
• Link
• Disabled

Tabs with Dropdown Menus

Sample code:

• Active
• Dropdown
  • Link 1
  • Link 2
  • Link 3
• Link
• Disabled

For example:

 Bootstrap Example 

Tab with Dropdown Menu for Tipsmake.com

• Active
• Dropdown
  • Link 1
  • Link 2
  • Link 3
• Link
• Disabled

Dynamic/Toggle Tabs

To make tabs toggleable, add the attribute data-toggle="tab" to each link. Then, add a class .tab-panewith a unique ID for each tab and place them inside the element containing the class .tab-content.

If you want the tab to fade when clicked, add a class .fadeto it .tab-pane. Sample code:

• Gate
• Menu 1
• Menu 2

  . . . 

For example:

 Bootstrap Example 

Tabs Can Be Switched for Tipsmake.com

• Homepage
• Life
• Technology

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Dynamic/Switchable Pill

You apply the same code template as above to the pill, just change the `data-toggle` property to `data-toggle="pill"` :

• Gate
• Menu 1
• Menu 2

  . . . 

For example:

 Bootstrap Example 

Pill Can Be Converted for Tipsmake.com

• Gate
• Menu 1
• Menu 2

Homepage

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Above are all the ways to create a navigation menu using Bootstrap 5. As you can see, it's not too difficult, right?

FAQ

What is the main point of lesson 20: navs in bootstrap 5?

Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software.

Why is this development important?

Key takeaway: Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software.

What are the key takeaways?

Navs in Bootstrap 5 are a component that helps you design navigation on websites, applications, or software.