Bootstrap 4 Navs |
Here's an example of a basic navigational menu,
To create the basic nav, add the .nav class to your <ul> element, then include .nav-item class to your each <li> element represents nav items and add <a> element inside each <li> element with .nav-link class for their links.
Navigation Alignment
By default, the navigation menu should be on the left. You can change their alignment either right or center as well.- For the right nav, add .nav class along with .justify-content-end class. (e.g. <ul class="nav justify-content-end">)
- For the center nav, add .nav class along with .justify-content-center class. (e.g. <ul class="nav justify-content-center">)
Vertical Nav
You can create vertical navigation by adding .flex-column class to your nav like the above example.
Nav Tabs
Add .nav-tabs class to your nav for tab menu.Nav Pills
The nav pills are used to create a nav with the background color using the .nav-pills class to your nav like mentioned above.
Tabs/Pills with Dropdowns
Dynamic Tabs
To make toggleable tabs with different content on each tab by adding data-toggle="tab" attribute to each hyperlink and add .tab-content class to your <div> element inherited with different .tab-pane class for different contents. Let's look into an example,Dynamic Pills
It is similar to dynamic tabs, the only changes are with the attribute data-toggle="pill".
Comments