2018-10-12 19:37:13 +00:00
---
title: Tabs and Pills
---
## Tabs and Pills
Tabs and Pills are forms of navigation. Meaning they help the end-user navigate through the site in a user-friendly manner.
### Tabs
To achieve bootstrap tabs, first you need an element that has the `.nav` class assigned to it. Then you simply add an extra class named `.nav-tabs` .
```html
< ul class = "nav nav-tabs" >
< li role = "presentation" class = "active" > < a href = "#" > Home< / a > < / li >
< li role = "presentation" > < a href = "#" > Profile< / a > < / li >
< li role = "presentation" > < a href = "#" > Messages< / a > < / li >
< / ul >
```
![Bootstrap Tabs ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs.PNG )
---
### Pills
Bootstrap Pills is achieved the same way as Bootstrap Tabs except instead of `.nav-tabs` , use `.nav-pills` .
```html
< ul class = "nav nav-pills" >
< li role = "presentation" class = "active" > < a href = "#" > Home< / a > < / li >
< li role = "presentation" > < a href = "#" > Profile< / a > < / li >
< li role = "presentation" > < a href = "#" > Messages< / a > < / li >
< / ul >
```
![Bootstrap Pills ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills.PNG )
---
### Pills Stacked
Bootstrap Pills are also vertically stackable by using `.nav stacked` in conjunction with `.nav-pills` .
```html
< ul class = "nav nav-pills nav-stacked" >
...
< / ul >
```
![Bootstrap Pills Stacked ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Stacked.PNG )
---
### Bootstrap Tabs/Pills Justified
Both Bootstrap Tabs and Pills can have equal width of their parent at screens wider than 768px by using `.nav-justified` class. On smaller screens, the nav links are stacked.
```html
< ul class = "nav nav-tabs nav-justified" >
...
< / ul >
< ul class = "nav nav-pills nav-justified" >
...
< / ul >
```
![Bootstrap Tabs/Pills Justified ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20And%20Pills%20Justified.PNG )
---
### Disabled Links
For any nav component (tabs or pills) add `.disabled` for gray links and no hover effects
```html
< ul class = "nav nav-pills" >
...
< li role = "presentation" class = "disabled" > < a href = "#" > Disabled link< / a > < / li >
...
< / ul >
```
![Disabled Links ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20and%20Pills%20Disabled%20Link.PNG )
---
### Tabs with Dropdowns
Add dropdown menus to your nav tabs.
```html
< ul class = "nav nav-tabs" >
...
< li role = "presentation" class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true" aria-expanded = "false" >
Dropdown < span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
...
< / ul >
< / li >
...
< / ul >
```
![Tabs with Dropdowns ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20Dropdown.PNG )
---
#### Tabs with Dropdowns
Add dropdown menus to your nav pills.
```html
< ul class = "nav nav-pills" >
...
< li role = "presentation" class = "dropdown" >
< a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" role = "button" aria-haspopup = "true" aria-expanded = "false" >
Dropdown < span class = "caret" > < / span >
< / a >
< ul class = "dropdown-menu" >
...
< / ul >
< / li >
...
< / ul >
```
![Pills with Dropdowns ](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Dropdown.PNG )
2018-11-26 09:44:27 +00:00
#### More Information
- [Bootstrap Documentation for Tabs and Pills ](https://getbootstrap.com/docs/4.1/components/navs/#tabs )