Bootstrap 3 Examples
Interactive Bootstrap 3 examples. Open with the full screen editor and view in full screen preview.
Containers
Grids
- Grid maintained on small devices (
.col-xs-*) - Grid stacked on small devices (
.col-md-*)
Typography
- Headings
- Heading classes (where normal text can mimic a heading)
- Sub-headings
- Marked text
- Abbreviations
- Initialism
- Blockquotes
- Blockquotes with source
- Blockquotes, reversed (right aligned)
- Unordered list, unstyled
- Unordered list, inline
- Description list
- Description list, horizontal
- Computer code
- Keyboard input
- Preformatted text
- Sample text
- Variables
Tables
- Default table (using Bootstrap's
.tableclass) - Striped table
- Bordered table
- Table with the "hover over" effect on its rows
- Condensed table
- Contextual classes on tables
- Responsive tables
Forms
- Basic form
- Inline form
- Hidden labels
- Horizontal form
- Control size
- Horizontal form group size
- Input control size
- Help text
- Validation styles
- Static control
Buttons
Images
Thumbnail Images
Glyphicons
Dropdowns
- Basic dropdown menu
- Dropup menu
- Align dropdown items to the right
- Menu headers
- Dividers
- Disabled menu items
Button Groups
- Horizontal button group
- Vertical button group
- Button group size
- Button group toolbar
- Button group with dropdown
- Split dropdown
- Justified button group — using the
<a>element - Justified button group — using the
<button>element
Input Groups
- Basic input group
- Text on both sides
- Input group size
- Input group with checkboxes & radio buttons
- Button addons
- Input group with dropdown
- Input group with split dropdown
Collapsible Content
Navs
Navbars
- Basic navbar
- Navbar with dropdown
- Navbar with form control
- Navbar items aligned right
- Navbar with buttons
- Navbar with text
- Navbar with non-nav links
- Inverted navbar
- Fixed navbar
- Fixed navbar (top)
- Fixed navbar (bottom)
- Static navbar (top)
Breadcrumbs
Pagination
- Default pagination
- Active state (for current page)
- Disabled pagination item
- Pagination size
- Pagers (eg "Previous/Next")
- Pager alignment
- Disabled pager
Labels
Badges
Jumbotron
Alerts
Modal Dialog Boxes
Progress Bars
- Default progress bar
- Contextual classes
- Striped progress bars
- Animated stripes
- Stacked progress bars
Media Objects
- Basic media object example
- Nested media objects
- Horizontal aligment — aligned right
- Vertical alignment — aligned middle
- Vertical alignment — aligned bottom
- Two images stacked vertically
- Two images side by side
- Two images left and right aligned (text in the middle)
- Media list (media objects placed inside a list)
List Groups
- Default list group
- List group with badges
- Linked list group items
- Buttons in a list group
- Disabled items
- Contextual classes
- Custom content inside a list group
Bootstrap Panels
- Basic panel
- Panel headings
- Panel footer
- Contextual classes
- Table inside a panel
- Table with the
.panel-bodyclass - List group inside a panel
Bootstrap Wells
Responsive Embed
Bootstrap Carousels
Tooltips
Popovers
- Basic popover example
- Popover placement
- Popover with a title
- Close popover by clicking outside the popover
- Popover on hover