What is Bootstrap?
Where to get Bootstrap3?
All bootstrap elements must be inside a "container" element, often a "div" tag, or the body element.
A container is a page level attribute and cannot be nested, but it is common to have a header container, a body container, and a footer container, but these cannot overlap.
A div with the class of ".container" will center content in center of viewport. A div with a class of ".container-fluid" will always takes up full width of browser or viewport.
Within the container are a series of "row" divs.
Within the "row" are 12 columns.
Visual breakpoints are how bootstrap arranges the 12 columns with different sizes of devices.
Example of a class: If an element has a class of "col-sm-6", it means on small devices, and everything larger the element will be 6 columns wide. It has no effect on devices smaller than that, i.e., "xs".
Mulitple classes can be assigned to an element, for example, "col-sm-3 col-lg-5".
class="col-md-6 col-xs-12" to specify 6 columns on regular, but on phones take all 12
Meta-tags for devices
<!-- include Bootstrap libraries --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Now inside the body we can create three columns in one row with widths of 2,8, and 2.
<div class="container-fluid"> <!-- main div --> <div class="row"> <!-- row --> <aside class="col-sm-2 leftPanel bordered" > <!-- left panel --> <h1>Left Panel</h1> </aside> <section class="col-sm-8 centerPanel bordered"> <!-- center panel --> <h1>Center Panel</h1> </section> <section class="col-sm-2 rightPanel bordered"> <!-- right panel --> <h1>Right Panel</h1> </section> </div> <!-- row -->
Here is a very basic example of the "mostly fluid" pattern, it will simply stack all the sections when viewed on a xtra-small device (i.e., when the width is less than 768 pixels): Mostly Fluid, view it then right-click and "View Source".
To move columns around we use "push" and "pull" classes. For example, "col-sm-pull-8" will pull the column to the left 8 sections for everything larger than "sm" size.
To hide and entire column at the "sm" size, we use the "hidden-sm". To make then visible use "visible-sm". For example, to hide a column only on phones use these classes: "hide-xs visible-sm".
Here is another example of the "mostly fluid" pattern, but instead of stacking, we will move columns: Mostly Fluid, view it then right-click and "View Source".
An example Bootstrap navigation bar based on the one from GetBootstrap.com is here.
And seen on a phone it looks like this:
An example Bootstrap navigation bar with three drop-down lists is here.
Links and Other Items
To see how the page will look in various devices use the developer extension in Chrome and select "command-option-i" on the mac and click on the little device icon at the upper-left.