Previously we looked at the most basic usage of columns within rows. Bootstrap allows you to individually control how each column behaves when it has to respond to different screen sizes.

Responsive Column Classes

So the description about these in the documentation is found here.

As you can see in the documentation example:

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

The second row has column size provided with the class name. So you can specify 1-12 columns after the “col-“ part, to control it manually. The maximum is 12, because that’s how Bootstrap has defined it.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
    <div class="row">
    <div class="col-8">col-8</div>
    <div class="col">col-?</div>
  </div>
</div>

See the Pen Bootstrap Example 6 by itsprogramming (@itsprogramming) on CodePen.

You don’t have to specify all column sizes though, in this case, the 3rd rows second column will automatically take up 4 column spaces, because that’s all that is left, after the first one takes 8/12.

Positioning Columns

You can also define where your columns are placed, if they don’t take up the full width:

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Here’s a few more examples in the docs.

Offsetting Columns

Also very easy to do. All that you really do is just add the correct class and you’re good!

The example has “md” in it, that’s the breakpoint class name that we saw previously at the container breakpoint section in the docs.

Controlling Responsivity

Since the breakpoint class names are shared, you can easily add as many as are needed to the columns for different screen sizes if needed.

For example:

See the Pen Bootstrap Example 7 by itsprogramming (@itsprogramming) on CodePen.

This column will be:

  • Full sized on screens smaller than 576px
  • Take up 1 column on screens from 576-768px
  • Take up 3 columns on screens from 768-992px
  • Take up 6 columns on screens from 992-1200px
  • Be full sized again on screens larger than 1200px

Open the example in Codepen or do it in a local project, then open dev tools and watch the column change sizes as you change the screen width. As long as you test your design with these sizes, then there should be no design breaking for some specific tablet model or anything like that.

Nesting Columns

Another important aspect, to achieve more specific and advanced layouts is nesting columns.

There’s an example in the docs, but I’m not sure why they used breakpoint classes “col-sm-6” in them, here’s the same example, but simplified:

See the Pen Bootstrap Example 8 by itsprogramming (@itsprogramming) on CodePen.