Bootstrap 4: Creating Containers and Columns

Bootstrap works on the idea of containers and columns for it’s basic layout.

Containers are the most basic layout element in Bootstrap and are required when using the default grid system. You can nest containers, but most people don’t find this necessary.

You can choose from a responsive, fixed-width container where its max-width changes at each breakpoint (the .container class) or fluid-width meaning it’s width is always 100% wide (the .container-fluid class) .

To set up a container, you’d apply it’s class to a div, like below:

<div class="container"><!-- Content here --></div>
<div class="container-fluid"><!-- Content here --></div>

The breakpoints mentioned above relate to common sizes for different screens, such as extra-small (portrait phones, less than 576px), small (landscape phones, 576px and up), medium (tablets, 768px and up), large (desktops, 992px and up), and extra-large (large desktops, 1200px and up).

The Grid System

Bootstrap uses the flexbox to assist with how it handles the layout. The good news is, you don’t have to know too much about it to work with it.

In Bootstrap, you use columns to align information. There are a total of 12 columns, and you can use anywhere from 1 to all 12 of them in the same element. To do so, within your container div, you need to add a row.

Rows force a set of elements to a new row. This is not the only way to do it, but it is a common way. The row is what contains the columns.

If you do not specify the number of columns used, Bootstrap will attempt to evenly distribute the columns. To do so, you just use the class, .col

<div class="container">
<!-- create a row with two columns, each 1/2 of the width of the container - or 6 "columns"->
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
<!-- create a row with three columns, each 1/3 of the width of the container or 4 "columns" -->
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

However, you can choose to have columns made up that are not evenly distributed in width. Most websites use this method – maybe a main content section, and a sidebar. In which case you can specify col-<number of columns out of 12> this will allow you to work apportioning your columns as you see fit.

<div class="container">
<!-- create a row with two columns -->
  <div class="row">
    <div class="col-9">
    <!-- First column has 9 units of width or 75% -->
      1 of 2
    </div>
    <div class="col-3">
    <!-- Second column has 3 units of width or 25% -->
      2 of 2
    </div>
  </div>
</div>

Using the col set of classes is actually the smallest format, meant for the smallest screen.

You can also change things so that on wide screens you see data laid out in certain formats, and you see data laid out differently on other screen sizes. Such as using col-sm, col-md, col-lg sets of classes. For example:

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

Or you can mix and match your columns types. This guarantees you flexibility in how your control what your design looks like in different resolutions.

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

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

Bootstrap 4: Creating Containers and Columns was originally found on Access 2 Learn