Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
The quick brown fox jumps over the lazy dog
This is an h2 heading
This is an h3 heading
This is an h4 heading
Google wants to be the Giphy for turning boring data into awesome animated illustrations – sort of.
The search engine titan announced it has launched a handy animation tool that essentially lets you turn tedious number charts into slightly more entertaining GIF illustrations. The so-called Data GIF Maker practically allows users to set their desired parameters and effortlessly transform them into data visuals.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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.
Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Text Color
Link Color
Background Color
.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-white.bg-darkBorder Color
.border .border-primary.border .border-secondary.border .border-success.border .border-danger.border .border-warning.border .border-info.border .border-dark.border .border-light.border .border-whiteGradient Color
.pri-sec-gradient.sec-pri-gradient.pri-gradient-darker.pri-gradient-lighter.sec-gradient-darker.sec-gradient-lighter.light-gradient.dark-gradientNow, all together...
.bg-white, color is .text-dark, border is .border .border-secondary and this link is .text-warning.
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Inputs
Valid
Invalid
Icons
Icons
Addon
Select
File Browser
Search
Checkboxes
Radio Buttons
Textarea
Date Input
Date Icon
Date Range
Tabs and Progress Bars
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.
Nav Tabs & Pills
Progress Bars
Breadcrumbs
Pagination
Images
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
.img-fluid
.rounded
.rounded-circle
.img-raised
.border
.avatarNotifications
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Alert States
Warning!
Best check yo self, you're not looking too good.Danger!
Oh snap! Change a few things up and try submitting again.Success!
Well done! You successfully read this important alert message.Info!
Heads up! This alert needs your attention, but it's not super important.Modals
Tooltips
Popovers
Cards
Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.
Card Columns
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Feature Boxes
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
Feature Icons
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.
Feature Sides
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Feature Cards
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.
Heading goes here
Subway tile sustainable try-hard poke. Synth chambray taiyaki sartorial humblebrag.