Modern web sites have to support a wide variety of platforms, ranging from mobile devices to laptops and desktop computers. These devices differ significantly in the size of the screens used, so web site designers have to be prepared to accomodate different sized screens.
CSS actually offers a number of mechanisms designed to react in an intelligent way to available screens sizes. The Bootstrap CSS library takes full advantage of those mechanisms to deliver a set of classes you can use to build a site that will automatically reconfigure itself for different sized screens.
The primary trick that Bootstrap uses to respond to smaller screen sizes is a system that automatically converts multi-column layouts to a single-column layout on smaller screens.
To make a multi-column layout in Bootstrap you start by using a <div> element with
the bootstrap row class to enclose each column in the layout. You then equip each of those
<div> elements with a class that takes the form
col-xx
where xx is a size value (xs, sm, md, or lg).
If you set up a multi-column layout and the browser window shrinks below a pre-set threshhold, Bootstrap will
automatically reconfigure the multi-column layout into a single-column layout. The screen size at which that
transition takes place is specified by the size value xx. For example, using a size specifier of
xs, your layout will transition to a single column layout as soon as the browser window shrinks below the extra-small
size threshhold typical of a mobile device.
You can also set up columns with unequal size by using col-xx-nn style classes.
Bootstrap divides the screen into 12 columns horizontally, and a given <div> element
uses its nn value to span anywhere from 1 to 12 of those columns. The nn values
for a set of columns must add up to 12 or less.
For example, to make a layout with a middle column that is twice as wide as the columns on either side of
it, you would use 3 <div> elements with classes of col-md-3, col-md-6,
and col-md-3, respectively.
One further requirement to use the multi-column layout system in Bootstrap strap is that the <div>
elements containing the columns must themselves appear inside a <div> element that has the
Bootstrap container class.
You can see an example of the column system in use on the landing page for this lecture. The bottom half of that page uses a three-column layout. If you resize the browser window while looking at that page you will see the three-column layout turn into a one-column layout automatically once the width of the browser window drops below a minimum width.
Here is an outline of the structure that that page uses to achieve the multi-column effect.
<div class="container"> <div class="jumbotron"> ...Welcome message goes here... </div> <div class="row"> <div class="col-md"> ...Column One... </div> <div class="col-md"> ...Column Two... </div> <div class="col-md"> ...Column Three... </div> </div> </div>