bootstrap 4 layout utilities Tweet

Css flexbox utilities can be used to align columns in bootstrap 4. The columns can be aligned horizontally as well as vertically if the height of the wrapper of the columns is defined. All the columns can be given same alignment property at once or different alignment properties individually.

Vertical Alignment

Vertical alignment of columns can be possible when a wrapper have a defined height. You can align columns to the top, center or bottom of the wrapper.

<div class="container">
  <div class="row align-items-start">
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
  </div>
</div>

Result

<div class="container">
  <div class="row align-items-center">
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
  </div>
</div>	

Result

<div class="container">
  <div class="row align-items-end">
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
    <div class="col-sm">Column</div>
  </div>
</div>	

Result

<div class="container">
  <div class="row">
    <div class="col-sm align-self-end">Column</div>
    <div class="col-sm align-self-center">Column</div>
    <div class="col-sm align-self-start">Column</div>
  </div>
</div>	

Result

Horizontal Alignment

Horizontal alignment of columns in a row can be possible when the total width of all the columns in the row is lesser than the entire width of the row. Columns can be horizotally aligned on the left, right or center of the row as well as placing them to have equal empty space on all sides or forcing spaces only between them is possible.

<div class="container">
  <div class="row justify-content-start">
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
  </div>
</div>

Result

<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
  </div>
</div>

Result

<div class="container">
  <div class="row justify-content-end">
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
  </div>
</div>

Result

<div class="container">
  <div class="row justify-content-around">
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
  </div>
</div>

Result

<div class="container">
  <div class="row justify-content-between">
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
    <div class="col-sm-3 col-col">Column</div>
  </div>
</div>

Result

No Gutters

Gutters predefined on the grid classes can be removed using no-gutters class wherever needed.

<div class="container">
  <div class="row no-gutters">
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

Column Wrapping

If the sum of total grid taken up by columns exceed 12, the exceeding columns will automatically drop to a new line.

<div class="container">
  <div class="row no-gutters">
    <div class="col-5"></div>
    <div class="col-5"></div>
    <div class="col-3"></div>
  </div>
</div>

In the example above, the last column-group col-3 will drop to a new line as it will make the total column count exceed 12.

Column Breaks

The class w-100 will force a column break wherever needed that makes the columns written below it to appear in a new line.

<div class="container">
  <div class="row no-gutters">
    <div class="col-3"></div>
    <div class="col-3"></div>
    <div class="w-100"></div>
    <div class="col-3"></div>
    <div class="col-3"></div>
  </div>
</div>

Order Columns

You can add class order- with any number from 1 to 12 to visually order columns. You can also use responsive order classes like order-sm- or order-md- to force them on specified viewports only. Classes order-first and order-last are also supported which will override the numbered orders.

<div class="container">
  <div class="row">
    <div class="col-sm-2 order-5">1</div>
    <div class="col-sm-2 order-1">2</div>
    <div class="col-sm-2 order-7">3</div>
    <div class="col-sm-2 order-last">4</div>
    <div class="col-sm-2 order-3">5</div>
    <div class="col-sm-2 order-first">6</div>
  </div>
</div>

Result

Column Offset

You can set up a column to appear leaving certain space infront of it using the column offset. Offset can be achieved in two ways in bootstrap 4 namely using class offset- or using margin auto utilities. offset- class will force the column leave defined number of grid columns infront of it in the row.

<div class="container">
  <div class="row">
    <div class="col-sm-3">Column</div>
    <div class="col-sm-3 offset-sm-4">Column after offset</div>
  </div>
</div>	

Result

Margin Utilities

With margin utilities, you can force columns away from each other within a row.

<div class="container">
  <div class="row">
    <div class="col-sm-4">.col-sm-4</div>
    <div class="col-sm-4 ml-auto">.col-sm-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Result

Column Nesting

Nesting column is highly useful in layout designing and is done more often than not. Simply, add a row inside the column where you need to nest other columns and then simply add columns inside it. The sum of grids used up by columns should never exceed 12.

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
      </div>
    </div>
    <div class="col-sm-3"></div>
  </div>
</div>