How do Bootstrap columns work?

Summary: As long as the window is larger than the size you specified (xs, sm, md, lg), give it the proportion you specified (count), otherwise vertically stack the elements.

*****

Bootstrap can divide the width of any container into 12 imaginary equal-width segments. You can then set the width of an HTML element equal to any sum up to 12 of the segments widths by giving your element the class col-size-count.

Structure:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <!-- Your content/html element/s to go in the cell -->
    </div>
  </div>
</div>

Anatomy:

col-size-count

col: a key term for the whole family of column related bootstrap classes.

size: The browser window size when the count applies.

• If the browser window is smaller than the corresponding size, then the child elements will vertically stack, and horizontally fill the space to 100%
• If the browser window is equal or greater than the corresponding size, then the child elements will take on widths equal to the sum of the corresponding segment count.

Sizes

• xs (for phones - screens less than 768px wide)
• sm (for tablets - screens equal to or greater than 768px wide)
• md (for small laptops - screens equal to or greater than 992px wide)
• lg (for laptops and desktops - screens equal to or greater than 1200px wide)

The window is greater than sm, 6 is half of 12, so the colored views take up half the width.

The window’s width just shrank past the sm threshold of 768px and so the views stacked vertically and filled 100% of the width.

What if multiple col-size-count classes are assigned to a single element?

• The widths of the elements follow the largest class size less than the window’s width.
• If there is no size less than the window, then the elements stack

The largest specified class size that is less than the width of the window is large (1200px), so the large proportions are applied.

The window just shrank under the lg width (1200px), the next highest specified size is sm so the elements are equal width.

The window shrank below the sm width (768px). There is no next largest size specified, so the elements stack

Rules

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid 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 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
• Column widths are in percentage, so they are always fluid and sized relative to their parent element