Web Content Display

Bootstrap Reference

Typography

Headings

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

h1 Page

h2 Portlet / Section

h3 Content

h4 Content Section

h5 Reserved
h6 Reserved

Blockquotes

<blockquote>

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.

From WWF's website

<blockquote class="blockquote-reverse">

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.

From WWF's website

Contextual Colours

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger

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.

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Buttons

Button Colours

.btn, .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link

Button Sizes

.btn-lg, .btn-md, .btn-sm, .btn-xs, .btn-block

Button Width

.btn-block

Button States

.active, .disabled

Button Groups

Standard Group

Vertical Group

Justified Group

Dropdowns

Basic Dropdown

with headers, dividers, active and disabled states

Split Button Dropdown

Badges

With Anchors

<a>Link<span class="badge">Text</span></a>

Comments 10

With Buttons

<button>Label<span class="badge">Text</span></button>

Tooltips

*requires jQuery

Top Bottom Left Right

Popovers

*requires jQuery

Top Bottom Left Right

Alerts

.alert & .alert-success, .alert-info, .alert-warning, .alert-danger

Panels

Basic

.panel > .panel-body

A Basic Panel

Panel Heading

.panel > .panel-heading

Panel Heading
Panel Content

Panel Footer

.panel > .panel-footer

Panel Content

Panel Group

.panel-group > .panel > .panel-footer

Panel Content
Panel Content

Contextual Panels

.panel-group > .panel & .panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger

Panel with panel-default class
Panel Content
Panel with panel-primary class
Panel Content
Panel with panel-success class
Panel Content
Panel with panel-info class
Panel Content
Panel with panel-warning class
Panel Content
Panel with panel-danger class
Panel Content

Forms

Text Input

.form-control

Text

Text Input Sizes

.form-control & .input-sm, .input-lg

Textarea

.form-control

Checkboxes

Radio Buttons

Progress Bar

70% Complete

Pager

Pagination