Hello World!

Paragraph

Resize the browser window to see the effect.

.col-sm-4
.col-sm-8

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

Highlight Text

Use the mark element to highlight text.

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

Blockquotes

The blockquote element is used to present content from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors":

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Basic Table

The .table class adds basic styling (light padding and only horizontal dividers) to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Jumbotron

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

This is some text.

This is another text.

Well

Small Basic Well did by Ricardo Felippe
Large Basic Well did by Ricardo Felippe
Normal Basic Well did by Ricardo Felippe

Alerts

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Success! You should Example of message/a>.
× Info! This alert box could indicate a neutral informative change or action.

Button Styles

Glyphicon Examples

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button:

Search icon on a styled button:

Print icon:

Print icon on a styled link button: Print

Badges on Buttons