Bootstrap's Grid

Contact Us or call 1-877-932-8228
Bootstrap's Grid

Bootstrap's Grid

Perhaps the most useful resource offered by the Bootstrap framework is the grid: including a series of markup tags with appropriate classes gives us the ability to craft layouts that scale appropriately for different viewport widths. We can create one design for phones, another for tablets, and yet another for desktops or large desktops. Nesting grids within grids allows us to create arbitrarily complex layouts.

By default, Bootstrap works on a 12-column system. A three-column layout targeting desktop-width viewports would have three elements with a width of "4", since 4 + 4 + 4 = 12; on smaller screens - an iPhone, say, the layout would collapse, with the three columns stacked vertically. A two-column layout with one large-width and one small-width column might have elements of "8" and "4" (since 8 + 4 = 12); a user visiting the page from a desktop browser would see one wider left column and one narrower right column, while smartphone visitors would see two equal-width elements, one below the other.

The key to the grid is a series of elements marked up with CSS classes as follows:

  • The outermost element (a <div> tag, say, or a <header> or <article> tag) has class .container (for a fixed-width layout) or .container-fluid (for a full-width layout);
  • Inside a container, elements have class .row to define a row;
  • Inside a row, column elements have classes denoting both the target viewport width and the width of the column, based on the 12-column system:
    • xs targets phones, with viewports less than 768px;
    • sm targets tablets, with viewports greater than 768px;
    • md targets desktops, with viewports greater than 992px;
    • lg targets large desktops, with viewports greater than 1200px.

    Each column class is of the form col-md-6, where the last number indicates the column's width; here, a "6" sets the column at half the container's width for desktop-sized viewports or larger.

    A simple Bootstrap grid might look like this:

    <div class="container">
    	<div class="row">
    		<div class="col-md-6"> col of width 6 </div>
    		<div class="col-md-3"> col of width 3 </div>
    		<div class="col-md-3"> col of width 3 </div>
    	</div>
    </div>

    This code would look like this on a viewport - a desktop browser, for example - sized larger than 992 pixels:

    Code Appearance on Viewport Larger Than 992 Pixels

    and like this on a viewport - a tablet or smartphone, say - sized smaller than 992 pixels:

    Code Appearance on Viewport Smaller Than 992 Pixels

    The background and border color of the column elements (the three <div>s) is a product of CSS styling specific to this example, rather than something that Bootstrap itself imposes. While the Bootstrap framework does include some basic styling, we can - and usually do - style our Bootstrap-enabled pages in a custom manner.

    Bootstrap also offers us visibility classes: applying these classes defines whether the element to which it is applied will show (or not) for a given viewport width. For instance, an element - an image, say, or an <h3> header - with class="visible-xs-block" will show for phones (viewports smaller than 768 pixels) but not for any wider viewports. Conversely, an element with class="hidden-xs" will not show on phones but will show on any device with viewport wider than 768 pixels. Here's a breakdown of the visibility classes:

    Extra small devices Phones (<768px) Small devices Tablets (768px) Medium devices Desktops (992px) Large devices Desktops (1200px)
    .visible-xs-block Visible Hidden Hidden Hidden
    .visible-sm-block Hidden Visible Hidden Hidden
    .visible-md-block Hidden Hidden Visible Hidden
    .visible-lg-block Hidden Hidden Hidden Visible
    .hidden-xs Hidden Visible Visible Visible
    .hidden-sm Visible Hidden Visible Visible
    .hidden-md Visible Visible Hidden Visible
    .hidden-lg Visible Visible Visible Hidden

    You can also use class="visible-xs-inline" and class="visible-xs-inline-block" (for xs, sm, md, or lg) to display elements in inline or inline-block fashion, respectively, instead of class="visible-xs-block".

    Bootstrap also offers a class by which you can render images responsive: in <img src="sample.jpg" class="img-responsive" alt="sample image">, the img-responsive class applies the style rules max-width: 100% and height: auto so that the image scales with its parent element.

    You can find more details and documentation on the Bootstrap grid and utility classes at http://getbootstrap.com/css/.

Next