This is a Bootstrap Jumbotron Section

Be sure to check out W3 Schools for the full tutorial, explanations, and examples.

Resize this responsive page to see the effect!

Also this is a fixed container that does not span the entire page.

Column 1

On a medium size screen there are 3 columns

When the screen size is small there will be only 1 column

Column 2

On a medium size screen there are 3 columns

When the screen size is small there will be only 1 column

Column 3

On a medium size screen there are 3 columns

When the screen size is small there will be only 1 column

This is a fluid container that spans the entire page

Resize the browser window to see the effect.

This will have 3 columns when the browser size is medium (desktop size) but when it it shrinks smaller than that the colors will stack on top of each other.

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

Bootstrap heading sizes along with the small element which creates a lighter, secondary text in the heading:

h1 Bootstrap heading (36px) secondary text

h2 Bootstrap heading (30px) secondary text

h3 Bootstrap heading (24px) secondary text

h4 Bootstrap heading (18px) secondary text

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

Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.

Text Colors

Bootstrap's text colors

Muted Color.

Important Color.

Success Color.

Information Color.

Warning Color.

Danger Color.

Background Colors

Bootstrap's background colors

Important Color.

Success Color.

Information Color.

Warning Color.

Danger Color.

Hover Rows

The row that is being hovered over will change its background color.

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

Responsive Embed

This uses the iframe tag which allows videos or slideshows to scale properly on different devices.

Notice the horizontal line above.

Bootstrap's Well Class

There's a gray background with padding around this text.

Alert Class

Notice the background and text colors below. The bold word indicates the name of the Bootstrap Class. Also the last 2 alerts can be closed.

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.

Button Styles

The style name corresponds to the color.

Button Sizes

Block Level Buttons

Block elements reach across the entire block, in contrast to inline elements.

Vertical Button Group

Nesting Button Groups

To create drop down menus nest the button groups.

Glyphicon Examples

Bootstrap has these awesome glyphicons here

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

Badges numerically reveal how many items are associated with a link.

News 5
Comments 10
Updates 2

Badges can even be within a button.

Bootstrap Label Classes

These labels have the Bootstrap colors.

Default Label Primary Label Success Label Info Label Warning Label Danger Label

Animated Striped Progress Bar

The active class animates the progress bar.

40%

Pagination - Active and Disabled States

With Bootstrap, pages can be marked as Active and also as Disabled

Pager

The pager class provides previous and next buttons. In the example below, the pagers are aligned.

List Group With Badges

Items can be marked as Active and also as Disabled

Linked Items With Contextual Classes

These use the Bootstrap Colors

Success Info Warning Danger

Panel Footer

A Bootstrap Panel is a bordered box. The box has padding around the content. The panel can also have a header and/or a footer.

Panel Heading
Panel Content

Panel Group

Panels can also be grouped together. The panels can also have Contextual Classes.

Panel Header
Panel Content
Success Panel Header
Panel Content
Primary Panel Header
Panel Content