Bootstrap Rows and Columns

Like most grid systems, Bootstrap's grid system is made up of rows and columns, and together they can be used to create any responsive layout you can imagine.

Rows

A row serves as a wrapper for columns and must be placed inside of a container. A row is created by adding the class row to any element inside of a container. By default columns will have horizontal padding (aka. a gutter), this can be removed by adding no-gutter to the row element. Rows also have negative margins applied to them so that the content will visually align down the left side.

<div class="container">
  <!-- row with gutters -->
  <div class="row">...</div>

  <!-- row without gutters -->
  <div class="row no-gutter">...</div>
</div>

Columns

All content must be placed inside of a column and only columns may be immediate children of rows. A column is created by adding the col inside any element that is inside of a row. By default, columns will be automatically layout as equal width columns.

<div class="container">
  <!-- columns with equal width -->
  <div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
</div>

Grid Options

There are many grid options that can be applied to the bootstrap Grid. The first is to force columns to stack at specific breakpoints. This is accomplished by appending the breakpoint abbreviation (sm, md, lg, xl) to the col class.

<div class="container">
  <!-- columns with equal width -->
  <!-- columns will stack for screen smaller than 768px -->
  <div class="row">
    <div class="col-md">.col-md</div>
    <div class="col-md">.col-md</div>
    <div class="col-md">.col-md</div>
  </div>
</div>

A number can be added to col class to indicate the number of columns out of 12 a specific column should take. Bootstrap's auto-layout feature means that if only one or a few columns have a specific width the remaining siblings will automatically resize around it.

NOTE

If using both breakpoint and the number of columns together, the number should always succeed the breakpoint abbreviation. col -(breakpoint) -(columns) example if we need a column to take 4 columns width at small breakpoint or above we will write the class as col-sm-4

<div class="container">
  <!-- columns are different width -->
  <!-- columns will stack for screen smaller than 576px -->
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm">.col-sm</div>
    <div class="col-sm-3">.col-sm-3</div>
  </div>
</div>

Alignment

Alignment of columns is also possible when using the Bootstrap grid system. The flexbox alignment utilities can be used to vertically and/or horizontally align columns.

Vertical alignment

To vertically align all columns, the align-items- group of classes can be applied to the row. The accepted values are start, end, center, baseline, and stretch (default)

<div class="container">
  <!-- columns will be centered vertically -->
  <div class="row align-items-center">
    <div class="col-sm">.col-sm</div>
    <div class="col-sm">.col-sm</div>
    <div class="col-sm">.col-sm</div>
  </div>
</div>

To align an individual column, the align-self- group of classes should be applied to the desired column. The accepted values are start, end, center, baseline, and stretch (default)

<div class="container">
  <!-- the middle column will be at the bottom -->
  <!-- the other columns will be at the top -->
  <div class="row align-items-start">
    <div class="col-sm">.col-sm</div>
    <div class="col-sm align-self-end">.col-sm</div>
    <div class="col-sm">.col-sm</div>
  </div>
</div>

Horizontal alignment

Horizontal alignment can be achieved by adding the justify-content- group of classes to the row. The accepted values are start(default), end, center, between, and around

NOTE

Horizontal alignment only works if the total width of all the columns does NOT equal the full width of the row.

<div class="container">
  <!-- the columns will be centered in the row -->
  <div class="row justify-content-center">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4">.col-sm-4</div>
  </div>
</div>

Row Columns

The row columns classes (.row-cols-*) gives a quick way to set the number of columns in the specific row.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>