Bootstrap Columns

Bootstrap columns work on the basis of a bootstrap 12 column grid template. These columns are placed within a row. These columns could be aligned, ordered, and offset.

Alignment

Flexbox alignment utilities is very useful to align column either vertically or horizontally.

Vertical Alignment Of Columns

Rule1: To align all the columns at the top of the container, you have to use class .align-items-start inside .row class.
Rule2: To align all the columns at the center of the container, you have to use class .align-items-center inside .row class.
Rule3: To align all the columns at the bottom of container, you have to use class .align-items-end inside .row class.

General Syntax

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

Try It Now

Source Code

    <div class="container bg-light mt-5">
  <div class="row align-items-start" style="height: 100px;">
    <div class="col bg-warning">
          First Column
    </div>
    <div class="col bg-danger">
      Second columns
    </div>
    <div class="col bg-warning">
         Third columns
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

First Column

Second columns

Third columns

Note:In this example .align-items-start is used to align all the column at the top of container.

Column: Vertically Center Alignment

General Syntax

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

Try It Now

Source Code

    <div class="container bg-light">
  <div class="row align-items-center" style="height: 100px;">
    <div class="col bg-warning text-center">First Column</div>
    <div class="col bg-danger text-center">Second columns</div>
    <div class="col bg-warning text-center">Third columns</div>
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

First Column

Second columns

Third columns

Note: In this example, .align-items-center is used to align all the columns at the center of the container.

Column:Vertically Bottom Alignment

Source Code

    <div class="container bg-light">
  <div class="row align-items-end" style="height: 100px;">
    <div class="col bg-warning">First Column</div>
    <div class="col bg-danger">Second columns</div>
    <div class="col bg-warning">Third columns</div>
  </div>
</div>

Try it yourself

Source Code : Output

First Column

Second columns

Third columns

Note: In this example, .align-items-end is used to align all the columns at the bottom of the container.

Aligning Of Individual Column Inside Container

Rule1: To align a single columns at the top of container, you have to use class .align-self-start inside .row class.
Rule2: To align a single columns at the center of container, you have to use class .align-self-center inside .row class.
Rule3: To align a single columns at the bottom of container, you have to use class .align-self-end inside .row class.

Source Code

    <div class="container bg-light">
  <div class="row" style="height: 100px;">
    <div class="col align-self-start bg-warning">First Column</div>
    <div class="col align-self-center bg-danger">Second Column</div>
    <div class="col align-self-end bg-warning">Third column</div>
  </div>
</div>

Try it yourself

Source Code : Output

First Column

Second Column

Third column

Note: In this example,.align-self-start, .align-self-center,.align-self-end is used to place container's child element to top,center & bottom respectively.This alignment process happens vertically on y-axis.

Horizontal Alignment

Aligning starts from the left side of the container on the horizontal axis or x-axis.

justify-content-start:Aligning starts from the left side of the container on horizontal axis or x-axis.

General Syntax

      <div class="row justify-content-start">
  <div class="col-4">
    First Column of the existing row
  </div>
  <div class="col-4">
    Second Column of the existing row
  </div>
</div>
<!--/row-->

Try It Now

Source Code

    <div class="container bg-light">
   <div class="row justify-content-center">
      <div class="col-4 bg-warning p-4">
         First Column of the existing row
      </div>
      <div class="col-4 bg-danger p-4">
         Second Column of the existing row
      </div>
   </div>
</div>

Try it yourself

Source Code : Output

First Column of the existing row

Second Column of the existing row

Note: Please keep in mind that .justify-content-start is used to align the container's child elements along the x-axis or horizontal axis from the start.

justify-content-center: All the column or children element of the row is aligned on the center of the x-axis or horizontal axis.

Source Code

    <div class="container bg-light">
   <div class="row justify-content-center">
      <div class="col-4 bg-warning p-4">
         First Column of the existing row
      </div>
      <div class="col-4 bg-danger p-4">
         Second Column of the existing row
      </div>
   </div>
</div>

Try it yourself

Source Code : Output

First Column of the existing row

Second Column of the existing row

Note: Please keep in mind that .justify-content-center is used to align all the column or children elements of the row to the center of the x-axis or horizontal axis.

justify-content-end:All the children item of row is moved to the end of the container.

Source Code

    <div class="container bg-light">
   <div class="row justify-content-end">
      <div class="col-4 p-4 bg-danger">
         First Column of the existing row
      </div>
      <div class="col-4 p-4 bg-warning">
         Second Column of the existing row
      </div>
   </div>
</div>

Try it yourself

Source Code : Output

First Column of the existing row

Second Column of the existing row

Note:Please keep in mind that .justify-content-end is used to align all the column or children elements of the row to the end of the container horizontally.

Column wrapping

If any row contains more than 12 columns within a single row then extra column is considered as one unit and wrap into a new line.

If the summation of all column rows is less than or equal to twelve then it places into the first-row line and the rest is placed into the second line of the row if the sum of all the columns is less than or equal to twelve columns.

Source Code

    <div class="container bg-light">
   <div class="row">
      <div class="col-9 p-4 bg-warning p-4">.col-9</div>
      <div class="col-4 bg-danger p-4">.col-4<br /></div>
   </div>
</div>

Try it yourself

Source Code : Output

.col-9

.col-4

Column breaks

Breaking columns to a new line in flexbox requires an element with a width of 100%.

Source Code

    <div class="container bg-light">
   <div class="row">
      <div class="col-6 col-sm-3 p-4 bg-warning">.col-6 .col-sm-3</div>
      <div class="col-6 col-sm-3 p-4 bg-danger">.col-6 .col-sm-3</div>
      <!-- Force next columns to break to new line -->
      <div class="w-100"></div>
      <div class="col-6 col-sm-3 p-4 mt-4 bg-warning">.col-6 .col-sm-3</div>
      <div class="col-6 col-sm-3 p-4 mt-4 bg-danger">.col-6 .col-sm-3</div>
   </div>
</div>

Try it yourself

Source Code : Output

.col-6 .col-sm-3

Column break can be applied at a specific breakpoint.

Source Code

    <div class="container bg-light">
  <div class="row">
    <div class="col-6 col-sm-4 p-4 bg-warning">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4 p-4 bg-danger">.col-6 .col-sm-4</div>
    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>
    <div class="col-6 col-sm-4 p-4 bg-warning mt-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4 p-4 bg-danger mt-4">.col-6 .col-sm-4</div>
  </div>
</div>

Try it yourself

Source Code : Output

.col-6 .col-sm-4

Note:In the above example,column break concept is mention based on specfic device breakpoint.

Reordering

Order classes

To order the visual content, use .order class. You can also apply it at a specific breakpoint(e.g., .order-1,.order-md-2).

Source Code

    <div class="container bg-light">
  <div class="row">
    <div class="col order-2 p-4 bg-danger">
      First column without order
    </div>
    <div class="col order-5 p-4 bg-warning">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1 p-4 bg-danger">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Try it yourself

Source Code : Output

First column without order

Second in DOM, with a larger order

Third in DOM, with an order of 1

Note: In the above example,row's child element can be ordered by providing .order-* or .order-{xs/sm/md/xl/xxl}-* to the child element base class.

Offsetting columns

The offset columns work on the basis of the left margin that will be generated by the column whenever applied offset to a specific column.

Offset classes

Offset classes is generally applied on the specific column using .offset-md-* classes. to generate left margin of a column by * columns.For example, .offset-md-4 moves .col-md-4 over four columns.

Source Code

    <div class="container bg-light">
  <div class="row">
    <div class="col-md-3 p-4 bg-light">.col-md-3</div>
    <div class="col-md-3 offset-md-3 p-4 bg-danger">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3 p-4 bg-info">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3 p-4 bg-alert">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-8 offset-md-2 p-4 bg-success">.col-md-8 .offset-md-2</div>
  </div>
</div>

Try it yourself

Source Code : Output

.col-md-3

.col-md-3 .offset-md-3

.col-md-8 .offset-md-2

Note:In the above example, column offset concept is used.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS