The Bootstrap cheat sheet

My First Bootstrap Page

WWF is the largest environment organisation, world wide.

Man kan også lage punktlister

Lez Zeppelin
- a great rock group from 60's and the 70's
Rolling Stones
- a great rock group from 60's and the 70's

One can even add code in Bootstrap. A JavaScript snippet will look like this: 

function add(a, b) {
    return a + b;
}

 

This text is muted.

This text is imported.

this text is a huge success.

This text is just info.

This text is a warning!

This text is dangereous!

If you wrap kbd around a part of a texts, it is formatted like this..

× Success! This box indicates that something, e.g. submitting a form. One can close it by clicking on the x. Over there -->

 

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

  

Tables

Responsive tables layot

# Fornavn Etternavn Alder By Land
1 John Smith 45 New York USA
2 Peter Soak 35 Washington USA
3 Jane Smith 35 Washington USA

Attention! Jombotron Inside!

Bootstrap, face it, is the best HTML/CSS/JS framework on this planet. It saves you a lot of work, and there is nothing that has been done that cannot be overriden.

This is the text with the small letters that noone reads, except you.

This is basically the same as the line above, implicit.

Buttons!

The different buttons in Bootstrap

 

The different button sizes in Bootstrap

 

Block button

 

Enabled and disabled buttons

 

Buttons can be grouped together

 

One can set the size of all the buttons in a group in the "group div" class

 

You can stack the buttons vertically

 

You can justify them as well so that they span over the entire containers width by wraping each button inside a new btn-group div tag

 

Create a button into a submenu. <span class="caret"></span> adds the down arrow

Footer

Here I use Bootstrap "panel" classes to create a footer. In most cases you will remove the grey header of the footer - just remove the whole line where the div-tag has a "panel-heading" class.

Here you can , and , and so on. This cheat sheet is based on the w3Schools Bootstrap tutorial. It is assembled and commented by me - Thomas Gabrielsen.

PS: You can find a overview of all the 260 icons here at w3schools which is created and kindly donated to Bootstrap by Glyphicons.