Bootstrap 4 navs and pills provide a simple and easy way to create horizontal and vertical nav components like tabs and pills.
id="id-of-collapse-element"
and .collapse
to the collapsible element .
.nav
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
Note:
In the above example,.nav
is assigned to the <ul>
,.nav-item
to the
<li>
& .nav-link
to the <a>
element base class.
Bootstrap nav creates horizontal and vertical navigation components easily. It has other different properties and features that make the nav component more elegant.
.justify-content-center
to the <nav>
container.
.justify-content-end
to the <nav>
container..flex-column
to the <nav>
container.
Note:
In the above example,flexbox utility classes are used to align nav component in the left, center and right direction.Please keep in mind that nav component is aligned by default in the left direction.To align center
use .justify-content-center
& to align right use .justify-content-end
.
.nav
and .nav-tabs
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
Note:
In the above example,bootstrap tabs can be created by assigning .nav
,.nav-tabs
to the <ul>
element base class ,.nav-item
to the <li>
element base class and .nav-link
to the <a>
element base class.
.active
to the <a>
element base class. .disabled
to the <a>
element base class
To make tab item active,assign .active
to the
<a>
element base class while to make disabled tab item,assign .disabled
to the <a>
element base class.
.nav
and .nav-pills
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
Note:
In the above example ,.nav
,.nav-pills
,.nav-item
& .nav-link
are used to make bootstrap pill menu.
.active
to the <a>
element base class. .disabled
to the <a>
element base class .nav
, .nav-pills
& .flex-column
to the <ul>
element base class.
.nav-item
to the <li>
element base class.
.nav-link
to the <a>
element base class.
Note:
To create vertical pill menu,assign .flex-column
to the pills container(<nav>
) base class.
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.
Note:
Navbar component can be extended within full available width,by assigning .nav-fill
to the <ul>
container base class.
To align equal width of nav/pill menu item ,use .nav-justified
to the
having class either
.nav .nav-pills
or .nav .nav-tabs
Note: Equal width inside nav/pill menu item can be created very easily by just using .nav-justified
.These class must be assigned to the nav container or pill container base class.
.nav
& .nav-tabs
to the <nav>
element base class.
.nav-item
& .nav-link
to the <a>
element base class.
Note: To create nav based navigation,assign .nav & .nav-tabs to the <nav>
element base class & assign .nav-link and .nav-item to the <a>
element base class.
.nav
& .nav-pills
to the <nav>
element base class.
.nav-item
& .nav-link
to the <a>
element base class.
Note:
To create pill based navigation,assign .nav & .nav-pills to the <nav>
element base class & assign .nav-link
and .nav-item
to the <a>
element base class.
Bootstrap Tabs With Dropdown can be made by utilizing tabs/pills and dropdown concept.
Note: Bootstrap tab with dropdown can be created very easily by using tabs and dropdown concept.
Follow pill and dropdown concept to make bootstrap tab with dropdown menu.
Note: Bootstrap pill with dropdown can be created very easiy by using pill and dropdown concept.