Bootstrap - Grid

bootstrap

Important:
http://www.helloerik.com/bootstrap-3-grid-introduction

http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/ - done reading
http://www.sitepoint.com/understanding-bootstrap-grid-system/ - done reading
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp - done reading
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php - done reading
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
http://www.tutorialspoint.com/bootstrap/bootstrap_grid_system.htm
http://www.w3resource.com/twitter-bootstrap/grid-system-tutorial.php
http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/
http://getbootstrap.com/css/#grid
https://www.youtube.com/watch?v=g3j7eRunzv4

What are the device classes?

  1. Extra small devices (xs, .col-xs-*): Phones (<768px)
  2. Small devices (sm, .col-sm-*): Tablets (≥768px)
  3. Medium devices (md, .col-md-*): Desktops (≥992px)
  4. Large devices (lg, .col-lg-*): Desktops (≥1200px)

Mobile devices that we use today come with 2 different screen orientations: Portrait and Landscape. So the above is mostly true for landscape view only. For example, if you are using a Samsung Galaxy Note III phone, the landscape view falls in the “Small Devices” category whereas the portrait view would fall under “Extra Small Devices”. http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/

Bootstrap’s grid system starts with a container element. Containers define how much space a grid system should use. They can be of two types: .container has different widths for different types of devices whereas .container-fluid expands to fit the width of the device. http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/

With the help of media queries, Bootstrap gives different widths to the .container depending on the size of the device:

  1. Extra small devices (<768px): width: auto (or no width)
  2. Small Devices (≥768px): width: 750px
  3. Medium Devices (≥992px): width: 970px
  4. Larger Devices (≥1200px): width: 1170px

Here are some more CSS declarations that are applied to the .container class.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

As seen in the above image, the .container prevents the content inside the element from touching the browser edge using 15px of padding on each side. It also ensures the container is centered using auto for left and right margins.

Rows are another important element in Bootstrap’s Grid System. Before creating columns, you can define a row using the class .row. Here’s a snippet from Bootstrap’s CSS for the .row class:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

As shown above, our row has negative left and right margins of -15px to allow the row to touch the edge of its container element.

You may have noticed that the margins on the row seem to be counteracting the 15px of padding applied to the container. If we analyze the columns, we can see why this is needed. Here’s a snippet from Bootstrap’s CSS for the .col-xs-6 class.

.col-xs-6 {
  padding-right: 15px;
  padding-left: 15px;
}

By default, all the columns have no width set, which defaults to width: auto. However, within the media queries, Bootstrap gives width values to each column class. Here’s a snippet from Bootstrap’s CSS for the column classes with asterisks replacing the sizes for brevity (xs, sm, md, etc):

.col-*-12 {
  width: 100%;
}

.col-*-11 {
  width: 91.66666667%;
}

.col-*-10 {
  width: 83.33333333%;
}

.col-*-9 {
  width: 75%;
}

.col-*-8 {
  width: 66.66666667%;
}

.col-*-7 {
  width: 58.33333333%;
}

.col-*-6 {
  width: 50%;
}

.col-*-5 {
  width: 41.66666667%;
}

.col-*-4 {
  width: 33.33333333%;
}

.col-*-3 {
  width: 25%;
}

.col-*-2 {
  width: 16.66666667%;
}

.col-*-1 {
  width: 8.33333333%;
}

Let’s analyze the above code. A class .col-lg-6 will have a width of 50% in large devices but when viewed in medium, small, and extra-small devices, the default width: auto is used. This ensures that the columns are converted to a stacked layout (rather than side by side) in smaller devices.

How can we create a grid?

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

How can we create a grid of 12 columns?

To create a grid of 12 columns add .col-md-1 to each of the column (a column can be a div or a span).

How can we create a 2 columns layout with the first column twice as large as the second column?

Use .col-md-8 on the first column and .col-md-4 on the second column (a column can be a div or a span). The total (8 + 4) must be equal to 12.

How can we create a 3 columns layout of equal width?

Use .col-md-4 on each column (a column can be a div or a span).

How can we create a 2 columns layout of equal width?

Use .col-md-6 on each column (a column can be a div or a span).

How can we achieve the effect of colspan with the grid system?

<div class="container-fluid">
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>

    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>

    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</div>

Bootstrap requires that we place the rows within an element with a class of container or container-fluid. Look at the grid example from the Getting Started page for additional details.

What media queries are used by Bootstrap?

We use the following media queries in our Less files to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

What are the padding on the .container or .container-fluid elements?

Bootstrap’s grid system needs a container to hold rows and columns. A container is a simple <div> element with a class of .container or .container-fluid. Both fixed and fluid containers have padding of 15px on the left and right sides.

Why does each row have a -15px margin?

A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.

What are the requirements for using Bootstrap grid system?

  1. Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  2. Use rows to create horizontal groups of columns.
  3. Content should be placed within columns, and only columns may be immediate children of rows.

Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

What happen if more than 12 columns are created in a single row?

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

In such a case, a virtual row will be created and unfitted columns will shift to the next row. For example, if you have defined 2 columns with the classes .col-md-8 and .col-md-5, the second column will shift to a new row because it requires 5 virtual Bootstrap columns whereas only 4 are left.

Should we use .container or .container-fluid?

Use .container-fluid because it is responsive. Use .container for fixed-width stuff.

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

What can we do if we do not want our columns to be stacked on smaller devices?

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

The above example is for Mobile and desktop.

If we have problem with the grid, where can we look for help?

Go to http://getbootstrap.com/css/ and search for the following topics:

  • Responsive column resets

What is the purpose of .col-md-offset-?

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

What is the purpose of col-md-push-* and .col-md-pull-*?

Change the order of our built-in grid columns.

What is the purpose of .col-xs-, .col-sm-, .col-md-, and .col-lg-?

I AM NOT QUITE CLEAR ON THESE YET.

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

Should we use .col-xs- or .col-md-, etc?

In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. Therefore, a column defined for extra smaller devices will work in all types of devices. http://www.sitepoint.com/understanding-bootstrap-grid-system/

How can we have nested-grids?

We understand that to use Bootstrap’s grid system, we need 3 things: A container, rows, and columns. So to nest a grid system within a column we will need the same three things. But the only difference is that the container is already defined. In this case, the columns will behave as the containers for the nested grid system. So, to nest a grid system within a column, we simply need rows and columns. No .container or .container-fluid elements are necessary for a nested grid system. http://www.sitepoint.com/understanding-bootstrap-grid-system/

What are the helper classes?

Bootstrap provides various helper classes that can be useful in certain situations in dealing with grids. These classes are:

  • .clearfix: Normally used to clear floats. Adding this class to any column will make it shift to a new row automatically, to help you correct problems that occur with uneven column heights.
  • Offsetting columns: You don’t have to occupy all 12 of the virtual columns. You can use offset classes like .col-xs-offset-* or .col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders). You can also move grid columns to the right for alignment purpose using the column offset classes like .col-md-offset-*, .col-sm-offset-*, etc. These classes offset the columns by simply increasing its left margin by specified number of columns. For example, the class .col-sm-offset-4 on the column .col-sm-8 moves it to the right over four columns from its original position.
  • Reordering: Use classes like .col-md-push-* and .col-md-pull-* to shift a column to the right or left, respectively.
  • .visible-md-block: makes the .clearfix class effective only on medium size devices and it is hidden on other devices.
  • .visible-xs-*: Makes the element visible only on extra small devices having screen width less than 768px. Hidden on others. You can also mix these classes to make the elements visible on multiple devices. For example, you can apply the class .visible-xs-* and .visible-md-* on any element to make it visible on extra small and medium devices.
  • .hidden-xs: Hide the elements only on extra small devices having screen width less than 768px. Visible on others. Similarly you can use these hidden utility classes to hide the elements on certain devices. You can also mix these classes to make the elements hidden on multiple devices. For example you can apply the class .hidden-xs and .hidden-md on any element to make it hidden on extra small and medium devices.
  • .visible-print-block: Hide block elements for browser rendering while visible for print.
  • .visible-print-inline: Hide inline elements for browser rendering while visible for print.
  • .visible-print-inline-block: Hide inline-block elements for browser rendering while visible for print.
  • .hidden-print: Hide elements for printing while visible on browser.
<div class="container">
  <!--  Header Section-->
  <div class="row header">
    <div class="col-xs-12 text-center">
      <h1>Bootstrap 3-Column Grid Example</h1>
    </div>
  </div>

  <div class="row navigation-bar">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#demo-navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="collapse navbar-collapse" id="demo-navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>

            </ul>
            <form class="navbar-form navbar-left pull-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
      </nav>
  </div>

  <!--  Content Area-->
  <div class="row content">
    <div class="col-md-4 col-sm-6">
      <p>Content ...</p>
    </div>
    <div class="col-md-4 col-sm-6">
      <p>Content ...</p>
    </div>
    <div class="col-md-4 col-sm-6">
      <p>Content ...</p>
    </div>
  </div>

  <!--  Footer Area-->
  <div class="row footer">
    <div class="col-xs-12 text-center">
      <p>&copy; 2014 SitePoint Pty. ltd.</p>
    </div>
  </div>

</div>

<p class="p">Demo by Syed Fazle Rahman. <a href="understanding-bootstrap-grid-system">See article</a>.</p>

Why should we use .col-xs- or other classes?

In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. Therefore, a column defined for extra smaller devices will work in all types of devices.

Applying any .col-sm-* class to an element will not only affect its styling on small devices, but also on medium and large devices having a screen size greater than or equal to 768px (i.e. ≥768px) if .col-md-* and .col-lg-* class is not present. Similarly the .col-md-* class will not only affect the styling of elements on medium devices, but also on large devices if a .col-lg-* class is not present. http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License