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.

Highlight Text

Use the mark element to highlight text.

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

Well Size

Small Well
Normal Well
Large Well

My First Bootstrap Page

This part is inside a .container class.

The .container class provides a responsive fixed width container.

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

Button Styles



Success! Indicates a successful or positive action.
Info! Indicates a neutral informative change or action.
Warning! Indicates a warning that might need attention.
Danger! Indicates a dangerous or potentially negative action.







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

News 5
Comments 10
Updates 2

Contextual Label Classes

Contextual classes can be used to color the label.

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

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class .progress:

Free Space
Warning
Danger