Bootstrap 5 Navs & Tabs

Bootstrap 5 Navs & Tabs

Bootstrap 5 navs & tabs provide simple and easy way to create horizontal and vertical nav & tab components.

Steps to create horizontal nav component

  • Add .nav to the nav container(<ul>) or (<ol>).
  • Add .nav-item to the (<li>) element base class.
  • Add .nav-link to the (<a>) element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above mention steps to create bootstrap horizontal nav component.

Navigation can also be created using <nav> element. Followings are the steps to create nav.

  • Add .nav to the nav container(<nav>) element.
  • Add .nav-link to the (<a>) element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Follow the above mention steps to create bootstrap horizontal nav component using <nav> and <a> element.

Active/Disabled Navs & Tabs

To make active nav item,use .active to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: To create active nav link,assign .active to the <a> element base class while to make disabled nav link,assign .disabled to the <a> element base class.

To make disabled nav item,use .disabled to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:To create disabled nav link,assign .disabled to the element base class.

Right Alignment

Add .justify-content-end to the nav container base class to align nav item right direction of the web page.

Source Code

Try it now

Code Explanation

Note: Nav item can be aligned right side of the web page by .justify-content-end.These class will be applied on the nav item container base class.

Vertical Nav

Steps to create vertical nav system.

  • Add .nav,& .flex-column to the <ul> element base class.
  • Add .nav-item to the <li> element base class.
  • Add .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above step to create vertical nav system.

Vertical Nav using <nav> Element

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above concept to create vertical nav using <nav> element.

Tabs

Steps to create tab menus:

  • Step1:Add .nav and .nav-tabs to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3:Add .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap tab component.

Pills

Steps to create pills:

  • Step1:Add .nav and .nav-pills to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3:Add .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap pill component.

Step To Create Vertical Pills

  • Step1:Add .nav,.nav-pills & .flex-column to the <ul> element base class.
  • Step2: Add .nav-item to the <li> element base class.
  • Step3:Add .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap vertical pills menu.

Alignment Of Nav/Pill Menu

Full Width Nav Alignment

To extend navigation nav into whole available width, use .nav-fill to the <ul> having class either .nav .nav-pills or .nav .nav-tabs.Please keep in mind that every nav item will not be same width.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap equal width nav menu.

Full Width Tab Alignment

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap equal width tab menu.

Assigning Equal Width To Nav/Pill Menu

To align equal width of nav/pill menu item ,use .nav-justified to the <ul> having class either .nav .nav-pills or .nav .nav-tabs. .

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap equal width to nav/pill menu.

Creating Nav Based Navigation

  • Step1:Add .nav & .nav-tabs to <nav> element base class.
  • Step2: Add .nav-item & .nav-link to <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap nav based navigation.

Creating Pill Based Navigation

  • Step1:Add .nav & .nav-pills to the <nav> element base class.
  • Step2: Add .nav-item & .nav-link to the <a> element base class.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap pill based navigation.

Bootstrap Tabs With Dropdown

Bootstrap tabs/pills menus and dropdown concept are used to make dropdown tabs/pills menu.

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note: Follow the above steps to create bootstrap tab with dropdown.

Bootstrap Pills With Dropdown

General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:Follow the above steps to create bootstrap pill with dropdown.

Online Test / Quiz