Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Badges
Documentation and examples for badges, our small count and labeling component.
Examples
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Primary Secondary Success Warning Danger Info Light Dark
Primary Secondary Success Warning Danger Info Light Dark
Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another link- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Slide 1 title
Slide 1 subtitle text
Slide 2 title
Slide 2 subtitle text
Slide 3 title
Slide 3 subtitle text
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Examples
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Form controls
Form states
Jumbotron
Lightweight, flexible component for showcasing hero unit style content.
Hello, traveler!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Modal components
Modal examples
Pagination
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
Small pagination
Medium pagination
Large pagination
Popovers
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Examples
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
Examples
Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Tooltips
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Examples
Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
Displays
Display 1
Display 2
Display 3
Display 4
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Lists
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Facilisis in pretium nisl aliquet
-
- Phasellus iaculis neque
- Vestibulum laoreet porttitor sem
- Aenean sit amet erat nunc
- Eget porttitor lorem
