Buzz
Bootstrap provides options for easily creating basic navigation components like Tabs and Pills. All navigation components in Bootstrap, including Tabs and Pills, are created using the .nav class.
Tabs and Pills in Bootstrap
1. Creating Basic Navigation Components in Bootstrap
2. Aligning Navigation Items
3. Creating Basic Tabs in Bootstrap
4. Creating Pills in Bootstrap
5. Creating Drag-and-Drop Menus in Tab and Pill in Bootstrap
5.1. Creating Drag-and-Drop Menu in Tab
5.2. Creating Drag-and-Drop Menu in Pill
6. Styling and Aligning Navigation Components
1. Creating Basic Navigation Components in Bootstrap
To create a basic navigation menu, we use the .nav class in Bootstrap.
Example: In the example below, we will create a basic navigation menu:
The output result looks like the following:
Note: We can use the .disabled class to give the appearance of a disabled link. However, the .disabled class only alters the visual appearance of the link by graying it out and removing the mouse hover effect. If the href attribute is removed, the link remains clickable.
2. Aligning Navigation Items
By default, navigation items are left-aligned. However, if desired, we can center or right-align these items using flexbox utilities.
Example: In the example below, we use the .justify-content-center class to center-align the navigation items.
The output result looks like the following:
Similarly, we can use the .justify-content-end class to right-align the navigation items.
Example: In the example below, we use the .justify-content-end class to right-align the navigation items.
The output result appears as follows:
Additionally, we can align the navigation items vertically using the .flex-column class.
Example: The example below illustrates how to align the navigation items vertically:
The output result looks like the following:
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 illustrates how to create a basic tab in Bootstrap:
The output result looks like the following:
If desired, we can also add icons to the tabs for a more dynamic interface, as shown in the example below:
The output result looks like the following:
4. Creating Pill 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.
Example: In the example below, we illustrate how to create Pill in Bootstrap:
The output result looks like the following:
Similarly to tabs, we can also add icons to pills for a more dynamic interface, as shown in the example below:
The output result looks like the following:
Additionally, we can apply the .flex-column class on the .nav element to align pills vertically. Refer to the example below:
The output result looks like the following:
5. Create Drag-and-Drop Menu in Tab and Pill in Bootstrap
To create a drag-and-drop menu (dropdown menu) in Tab and Pill in Bootstrap, we can use the CSS classes .dropdown, .dropdown-toggle, .dropdown-menu, and .dropdown-item along with the classes .nav, .nav-tabs or .nav-pills without the need for JavaScript code.
5.1. Crafting Drag-and-Drop Menus within Tabs
In the example below, we showcase how to effortlessly add a drag-and-drop menu within a tab using Bootstrap:
The resulting output appears as follows:
5.2. Building Drag-and-Drop Menus within Pills
In the example below, we illustrate how to seamlessly add a drag-and-drop menu within a pill in Bootstrap:
The resulting output takes the following form:
6. Style and Align Navigation Components
We can configure the navigation items to expand and fill to match all available width sizes by using the .nav-fill class on the .nav element.
Example: In this illustration, we showcase how to style and align navigation components:
The resulting output appears as follows:
Additionally, if you wish to fill all space horizontally along with aligning navigation items to equal width, utilize the .nav-justified class instead of .nav-fill. Refer to the example below:
The resulting output takes the following form:
In this Bootstrap tutorial, Mytour has guided you on creating Tabs and Pills in Bootstrap. In the next tutorial, Mytour will further introduce how to create navigation bars in Bootstrap. If you have any queries or questions, feel free to leave your comments below the article.
