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 toggleable |
Try it |
| .tab-pane |
Together with .tab-content and data-toggle="tab" (data-toggle="pill" for pills), it makes the tab/pill toggleable |
Try it |
Navbars
| Class |
Description |
Example |
| .navbar |
Creates a navigation bar |
Try it
|
| .navbar-brand |
Added to a link or a header element inside the navbar to represent a logo or a header |
Try it
|
| .navbar-btn |
Vertically aligns a button inside a navbar |
Try it
|
| .navbar-collapse |
Collapses the navbar (hidden and replaced with a menu/hamburger icon on mobile phones and small tablets) |
Try it
|
| .navbar-default |
Creates a default navigation bar (light-grey background color) |
Try it
|
| .navbar-fixed-bottom |
Makes the navbar stay at the bottom of the screen (sticky/fixed) |
Try it
|
| .navbar-fixed-top |
Makes the navbar stay at the top of the screen (sticky/fixed) |
Try it
|
| .navbar-form |
Added to form elements inside the navbar to vertically center them (proper padding) |
Try it
|
| .navbar-header |
Added to a container element that contains the link/element that represent a logo or a header |
Try it
|
| .navbar-inverse |
Creates a black navigation bar (instead of light-grey) |
Try it
|
| .navbar-left |
Aligns nav links, forms, buttons, or text, in the navbar to the left |
Try it
|
| .navbar-link |
Styles an element to look like a link inside the navbar (anchors get proper padding and an underline on hover, while other elements like p or span gets a default hover effect - white color in an inversed navbar and a black color in a default navbar) |
Try it
|
| .navbar-nav |
Used on a <ul> container that contains the list items with links inside a navigation bar |
Try it
|
| .navbar-right |
Aligns nav links, forms, buttons, or text in the navbar to the right. |
Try it
|
| .navbar-static-top |
Removes left, top and right borders (rounded corners) from the navbar (default navbar has a gray border and a 4px border-radius by default) |
| .navbar-text |
Vertical align any elements inside the navbar that are not links (ensures proper padding) |
Try it
|
| .navbar-toggle |
Styles the button that should open the navbar on small screens. Often used together with three .icon-bar classes to indicate a toggleable menu icon (hamburger/bars) |
Try it
|
Breadcrumbs 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 and Badges
| 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 |
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.