Buzz
Bootstrap provides options to easily create basic navigation components such as Tabs and Pills. All navigation components in Bootstrap, including Tabs and Pills, are created using the .nav class.
Bootstrap Tabs and Pills
1. Creating Basic Navigation Components in Bootstrap
2. Aligning Navigation Items
3. Creating Basic Tabs in Bootstrap
4. Creating Pills in Bootstrap
5. Creating Dropdown Menus in Tabs and Pills in Bootstrap
5.1. Creating Dropdown Menus in Tabs
5.2. Creating Dropdown Menus in Pills
6. Styling and Aligning Navigation Components
1. Creating Basic Navigation Components in Bootstrap
To create basic navigation menus, we use the .nav class in Bootstrap.
Example: In the example below, we will create a basic navigation menu:
The output result appears as follows:
Note: We can use the .disabled class to make the link visually appear disabled. However, the .disabled class only changes the visual appearance of the link by graying it out and removing mouse hover effects. If the href attribute is removed, the link can still be clicked.
2. Aligning Navigation Items
By default, navigation items are aligned to the left, but if desired, we can align these items to the center or right using flexbox utilities.
Example: In the example below, we use the .justify-content-center class to align the main navigation items in the center.
The output result appears as follows:
Similarly, we can use the .justify-content-end class to align the navigation items to the right.
Example: In the example below, we use the .justify-content-end class to align the main navigation items in the center.
The output result appears as follows:
Additionally, we can align the navigation items vertically by using the .flex-column class.
Example: The example below illustrates how to align the navigation items vertically:
The output result appears as follows:
3. Creating Basic Tabs in Bootstrap
To create basic tabs, we simply add the .nav-tabs class to the basic navigation component.
Example: The example below demonstrates how to create a basic Tab in Bootstrap:
The output result appears as follows:
If desired, we can also add icons to the tabs to create a more dynamic interface as shown in the example below:
The output result appears as follows:
4. Creating Pills in Bootstrap
Similarly, to create Pills for navigation components in Bootstrap, we add the .nav-pills class to the basic navigation component, replacing the .nav-tabs class.
Example: In the example below, we illustrate how to create Pills in Bootstrap:
The output result appears as follows:
Similar to tabs, we can also add icons to pills to create a more dynamic interface as shown in the example below:
The output result appears as follows:
Additionally, we can apply the .flex-column class on the .nav element to align the pills vertically. See the example below for reference:
The output result appears as follows:
5. Creating Dropdown Menus in Tab and Pill Components in Bootstrap
To create dropdown menus in Tab and Pill components in Bootstrap, we can utilize the CSS classes .dropdown, .dropdown-toggle, .dropdown-menu, and .dropdown-item along with the .nav, .nav-tabs, or .nav-pills classes without the need for JavaScript code.
5.1. Creating Dropdown Menus in Tab
The following example illustrates how to add a simple dropdown menu within a tab in Bootstrap:
The output result appears as follows:
5.2. Creating Dropdown Menus in Pill
The example below illustrates how to add a simple dropdown menu within a pill in Bootstrap:
The output result appears as follows:
6. Filling and Aligning Navigation Components
We can set the navigation items to expand and fill to match all available width sizes by using the .nav-fill class on the .nav element.
In the example below, we illustrate how to fill and align navigation components:
The output result appears as follows:
Additionally, if we want to fill all space horizontally as well as align navigation items to equal widths, we use the .nav-justified class instead of the .nav-fill class, refer to the example below:
The output result appears as follows:
In the Bootstrap tutorial above, Mytour just guided you on how to create Tabs and Pills in Bootstrap. In the next tutorial, Mytour will further introduce you to creating navigation bars in Bootstrap. If you have any questions or need clarification, readers can leave their comments below the article.
