Bootstrap Navigation Components

Tabs and Pills

Class Description Example
.nav nav-tabs Creates navigation tabs
.nav nav-pills Creates navigation pills
.nav nav-pills nav-stacked Creates vertical navigation pills
.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
.disabled Indicates a disabled (unclickable) tab/pill
Navigation tabs with dropdown menu
Navigation pills with dropdown menu
.tab-content Together with .tab-pane and data-toggle=”tab” (data-toggle=”pill” for pills), it makes the tab/pill toggable
.tab-pane Together with .tab-content and data-toggle=”tab” (data-toggle=”pill” for pills), it makes the tab/pill toggable

Breadcrumb and Pagination

Class Description Example
.breadcrumb Makes a breadcrumb
.pager Provides simple pagination links (Previous/Next)
.previous Aligns the .pager previous button to the left
.next Aligns the .pager next button to the right
.disabled Indicates an unclickable link
.pagination Provides pagination links
.pagination-lg Used together with the .pagination class to provide larger pagination links
.pagination-sm Used together with the .pagination class to provide smaller pagination links
.disabled Indicates an unclickable link
.active Indicates the current page

Labels

Class Description Example
.label label-default Indicates a default grey label
.label label-primary Indicates a blue label of type “primary”
.label label-success Indicates a green label of type “success”
.label label-info Indicates a light blue label of type “info”
.label label-warning Indicates a yellow label of type “warning”
.label label-danger Indicates a red label of type “danger”
.badge Indicates new or unread items
.jumbotron Indicates a big box for calling extra attention to featured content or information
.jumbotron (extra) To let the .jumbotron box span the full width, and without rounded corners, place it outside the .container class

Leave a Reply

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