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 |