Some margins. Content more centered in the screen.
Use this class in div elements.
Same as container but with smaller margins. Content uses the whole screen.
Use this class in div elements.
| Grid Size | Grid Class | Offset Class | Screen Size |
|---|---|---|---|
| Extra Small (Phones) | col-xs-* | col-xs-offset-* | 0px+ |
| Small (Tablets) | col-sm-* | col-sm-offset-* | 768px+ |
| Medium (Laptops) | col-md-* | col-md-offset-* | 992px+ |
| Large (TV's) | col-lg-* | col-lg-offset-* | 1200px+ |
Bootstrap divides the screen in 12 columns.
Use these classes in div elements.
The * can be used (instead of a number) to fill the existing space in the row. Except it behaves a little bit differently and occupies more space than expected, not sure why.
Plus, wrap every 12-column elements group inside a
div with the row class.
This makes our code a lot easier to read and makes bootstrap expect a grid structure.
The col-md-offset-1 adds a column of padding to the left.
xx can be: lg, md, sm or xs.
Hides the element from the specified screen size.
xx can be lg, md, sm or xs.
Shows the element only on the specified screen size.
You should see this paragraph only in small and extra small screens.
If you run into some floating elements problems in between screen changes, the clearfix class might help show it correctly for the messed up screen size.
This is a lead paragraph.
This is a normal paragraph.
It applies for the element and all of its children.
You guessed it! This class centers the text!
Icons!
It is usually used within an i tag.
You can customize the icons by overriding the glyphicon class in your own css file with properties like font-size and color.
Check all the available icons here.
Normal list
This is part of the Bootstrap JavaScript Library.
Responsive navbar
You have to check the code now.
The navbar-header is used to make sure the brand and the button are at the top whilst the links are shown below them on small screens.
The collapse hides the links. The navbar-collapse is used along with it so the links are only hidden when the screen is small.
The navbar-toggle makes the button only appear on small screens.
The data-toggle attribute indicates what class is going to be removed or added.
The data-target attribute indicates what element is getting its class toggled. It uses a standard
css selector.
The sr-only says the content will only be shown for screen readers (visually impaired people).
The icon-bar displays the horizontal line we see on menu/options buttons. We need 3 of them, so we add 3.
Collapse Plugin
data-toggle='class': indicates what class you're going to toggle. Usually,
it is the collapse class
data-target='selector': indicate which element is going to have its class toggled.
The selector is a standard css selector.
data-parent='selector': if you're within a group (say, panel-group),
you can use this attribute (instead of data-target) to target the parent element and
thus affect all that group's children.
The full code of the navbar you're seeing on this site.