New beginnings

Figuring out Bootstrap

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.

Blockquotes

To show the quote on the right use the 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.


1/1
1/3
2/3
3/3
.col-sm-4
.col-sm-8

My First Bootstrap Page

This part is inside a .container class.

The .container class provides a responsive fixed width container.

My First Bootstrap Page

This is some text.

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

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.

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.

Table

The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

# Firstname Lastname Age City Country
1 Anna Pitt 35 New York USA
1 Anna Pitt 35 New York USA
1 Anna Pitt 35 New York USA

Image

The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):

Chania

Thumbnail

The .img-thumbnail class creates a thumbnail of the image:

Cinque Terre

Image Gallery

The .thumbnail class can be used to display an image gallery.

The .caption class adds proper padding and a dark grey color to text inside thumbnails.

Click on the images to enlarge them.