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 |