A First Example
Open TheBootstrapFramework/Demos/index.html both in a browser and in a file editor to check out the code. Notice the difference between viewing the page from a desktop browser:
and viewing the page from a phone, or with a desktop browser at a narrow width:
In general, elements that are horizontal (positioned side-by-side) on the desktop view are vertical (stacked) in the mobile view. Be sure to investigate how the layout changes as you drag the width of your browser wider and narrower, or view the page from a tablet or mobile device. Let's review the code.
The <head> of index.html file includes a viewport tag and a link to the css/bootstrap.min.css we downloaded from Bootstrap; note that this CSS file is minified (stripped of whitespace, making for a smaller file) to improve performance with a quicker download.
We also link to a custom CSS file - css/demo.css - that we wrote ourselves. This file is not part of Bootstrap; rather, we added a few lines of CSS to add background color and borders to grid elements, to make it easier to see what's going on.
Inside the <body> of our example file, we present four examples of using the grid and one example of using a component. Note that the outermost element is a <div> tag with class container: this gives us the proper alignment and padding for the contained elements.
The first grid example - three equal columns - starts on line 36: a <div> of class row contains three <div>s each of class col-md-4. For desktop-width (or larger) viewports, these three <div>s display as equal-width, side-by-side elements; each takes up one third of the width of the container. For smaller viewports - an Android or iPhone, say, or a desktop browser dragged narrower - these elements appear stacked vertically.
In the second grid example (starting on line 44), on a desktop-or-larger viewport, we see three unequal columns, with the middle element taking up 50% of the allotted space and the two elements on either side each taking up 25% of the space. Note that the middle <div> element has a class of col-md-6 and the first and last <div>s have class col-md-3. As Bootstrap's grid works from a 12-column system, the "6" class gives that <div> half of the width, and the "3" class gives those two <div>s one quarter of the width. Note that, for smaller viewports, the elements again stack vertically, with each element having equal (100%) width.
The third grid example, starting on line 52, shows two columns: the first spans two thirds of the width (because of the col-md-8 class, "8" being two thirds of "12") and the second spans one third of the width (because of the col-md-4 class). Again, on smaller viewports, the elements stack vertically.
The fourth grid example, which starts on line 61, shows the use of an offset: we have two <div> elements, each with class col-md-4, but the first <div> also gets a class of col-md-offset-4. This offset class pushes the <div> right by the amount indicated (in this case, "4"), so that the two elements each span one third of the width, with the first one pushed right by one third. Notice that the offset doesn't apply for smaller viewports: this fourth example, when viewed on a narrower browser or on a tablet or mobile device, presents the two <div>s stacked vertically.
Finally, on line 70, we show an example of the "pills" navigation element we discussed above: three buttons span the width of the allotted space on larger viewports, while smaller-sized viewports see the three buttons stacked vertically.