Tab and Pill in Bootstrap

Tab and Pill in Bootstrap


In the previous Bootstrap lesson Taimienphi.vn introduced you to the icon in Bootstrap. In the next lesson below, Taimienphi.vn will introduce you how to create Tab and Pill in Bootstrap.


Bootstrap Provides options to easily create basic navigation components like Tab and Pill. All navigational components in Bootstrap including Tab and Pill are created using the class .nav.

Tab and Pill in Bootstrap

Table of Contents:
1. Create basic navigation component in Bootstrap
2. Align navigation items
3. Create Basic Tab in Bootstrap
4. Create Pill in Bootstrap
5. Create drop-down menus in Tab and Pill in Bootstrap
5.1. Create a drop menu in Tab
5.2. Create a drop menu in Pill
6. Fill and align the navigation elements

1. Create basic navigation component in Bootstrap

To create the basic navigation menu, we use layers .nav in Bootstrap.

For example: In the example below we will create a basic navigation menu:

tab and pill in bootstrap

The output will look like the following:

tab and pill in bootstrap 2

Note: We can use class .disabled so that the link’s appearance looks like disabled. Still class .disabled Only change the visual appearance of the link by making the link appearance gray and removing the hover effect. If delete attributes href, The link is still clickable.

2. Align navigation items

By default, the navigation items are aligned to the left, but if desired we can align these items to the center or to the right using the flexbox utilities.

For example: In the example below we use the .justify-content-center class to align the middle navigation items.

tab and pill in bootstrap 3

The output will look like the following:

tab and pill in bootstrap 4

Similarly we can use class .justify-content-end to align navigation items to the right.

For example: In the example below we use the .justify-content-end class to align the middle navigation items.

tab and pill in bootstrap 5

The output will look like the following:

tab and pill in bootstrap 6

We can also align navigation items vertically by using layers .flex-column.

For example: The following example illustrates how to align navigation items vertically:

tab and pill in bootstrap 7

The output will look like the following:

tab and pill in bootstrap 8

3. Create Basic Tab in Bootstrap

To create a basic tab, we just need to add the class .nav-tabs into the basic navigation component.

For example: The following example illustrates how to create a basic Tab in Bootstrap:

tab and pill in bootstrap 9

The output will look like the following:

tab and pill in bootstrap 10

If desired we can also add icons to the tabs to create a more vivid interface as in the example below:

tab and pill in bootstrap 11

The output will look like the following:

tab and pill in bootstrap 12

4. Create Pill in Bootstrap

Similarly, to create Pill for navigational elements in Bootstrap, we add a class .nav-pills on the basic navigation component, replaces the class .nav-tabs.

For example: The following example illustrates how to create a Pill in Bootstrap:

tab and pill in bootstrap 13

The output will look like the following:

tab and pill in bootstrap 14

Similar to the tabs, we can add pill icons to create a more animated interface like in the example below:

tab and pill in bootstrap 15

The output will look like the following:

tab and pill in bootstrap 16

Also we can apply class .flex-column on the element .nav To align the pill vertically, refer to the example below:

tab and pill in bootstrap 17

The output will look like the following:

tab and pill in bootstrap 18

5. Create drop-down menus in Tab and Pill in Bootstrap

To create a dropdown menu (Tab dropdown) in Tab and Pill in Bootstrap, we can use layers CSS .dropdown, .dropdown-toggle, .dropdown-menu and class .dropdown-item same classes .nav, .nav-tabs or class .nav-pills without using JavaScript code.

5.1. Create a drop menu in Tab

In the example below illustrates how to add a simple drop menu in a tab in Bootstrap:

tab and pill in bootstrap 19

The output will look like the following:

tab and pill in bootstrap 20

5.2. Create a drop menu in Pill

The following example illustrates how to add a simple drop menu in a pill in Bootstrap:

tab and pill in bootstrap 21

The output will look like the following:

tab and pill in bootstrap 22

6. Fill and align the navigation elements

We can set the expanded navigation and fill items to fit all available width sizes using the layer. .nav-fill on the element .nav.

For example: In the example below illustrates how to fill and align the navigation elements:

tab and pill in bootstrap 23

The output will look like the following:

tab and pill in bootstrap 24

Also, if we want to fill all the spaces horizontally as well as navigational items with the same width, we use the layer .nav-justified instead of class .nav-fill, refer to the example below:

tab and pill in bootstrap 25

The output will look like the following:

tab and pill in bootstrap 26

https://thuthuat.taimienphi.vn/tab-va-pill-trong-bootstrap-51122n.aspx
The Bootstrap lesson above Taimienphi.vn has just taught you how to create Tab and Pill in Bootstrap. In the next lesson, Taimienphi.vn will introduce you further Create navigation bar in Bootstrap. If you have any questions or questions, you can leave your comments in the comments section below.

.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *