Bootstrap Navigation Components
Tabs and Pills
| Class | Description | Example |
|---|---|---|
| .nav nav-tabs | Creates navigation tabs | Try it |
| .nav nav-pills | Creates navigation pills | Try it |
| .nav nav-pills nav-stacked | Creates vertical navigation pills | Try it |
| .nav-justified | Makes navigation tabs/pills equal widths of their parent, at screens wider than 768px. On smaller screens, the nav tabs/pills are stacked | Try it |
| .disabled | Indicates a disabled (unclickable) tab/pill | Try it |
| Navigation tabs with dropdown menu | Try it | |
| Navigation pills with dropdown menu | Try it | |
| .tab-content | Together with .tab-pane and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggable | Try it |
| .tab-pane | Together with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggable | Try it |
Breadcrumb and Pagination
| Class | Description | Example |
|---|---|---|
| .breadcrumb | Makes a breadcrumb | Try it |
| .pager | Provides simple pagination links (Previous/Next) | Try it |
| .previous | Aligns the .pager previous button to the left | Try it |
| .next | Aligns the .pager next button to the right | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .pagination | Provides pagination links | Try it |
| .pagination-lg | Used together with the .pagination class to provide larger pagination links | Try it |
| .pagination-sm | Used together with the .pagination class to provide smaller pagination links | Try it |
| .disabled | Indicates an unclickable link | Try it |
| .active | Indicates the current page | Try it |
Labels
| Class | Description | Example |
|---|---|---|
| .label label-default | Indicates a default grey label | Try it |
| .label label-primary | Indicates a blue label of type "primary" | Try it |
| .label label-success | Indicates a green label of type "success" | Try it |
| .label label-info | Indicates a light blue label of type "info" | Try it |
| .label label-warning | Indicates a yellow label of type "warning" | Try it |
| .label label-danger | Indicates a red label of type "danger" | Try it |
| .badge | Indicates new or unread items | Try it |
| .jumbotron | Indicates a big box for calling extra attention to featured content or information | Try it |
| .jumbotron (extra) | To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class | Try it |