Bootstrap5 Tutorial
BS5 Column
Previous Page
Next Page

Bootstrap Columns

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

Bootstrap Columns Alignment

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

Vertical Alignment Of Columns

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

Column: Vertically Top Alignment

General Syntax 

      <div class="container">
  <div class="row align-items-start">
    <div class="col">First Column</div>
    <div class="col">Second columns</div>
    <div class="col">Third columns</div>
  </div>
</div>
Try it now

Source Code 

          <div class="container bg-light mt-5" >
  <h2 class="text-center my-5">Bootstrap Column</h2>
  <div class="row align-items-start" style="height:200px;">
    <div class="col">First Column</div>
    <div class="col">Second columns</div>
    <div class="col">Third columns</div>
  </div>
</div>
<!--/container-->
Try it now

Code Explanation

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 class="col">Second Column</div>
</div>
</div>
Try it now

Source Code 

          <div class="container bg-light" >
 <h2 class="text-center">Bootstrap Column</h2>
 <div class="row align-items-center" style="height:200px;">
  <div class="col">First Column</div>
  <div class="col">Second columns</div>
  <div class="col">Third columns</div>
 </div>
</div><!--/column-->
Try it now

Code Explanation

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

Column: Vertically Bottom Alignment

General Syntax 

      <div class="container bg-light mt-5" >
  <div class="row align-items-end" style="height:200px;">
    <div class="col">First Column</div>
 </div><!--/row-->
</div><!--/container-->
Try it now

Source Code 

          <div class="container bg-light mt-5">
  <h1 class="text-center">Bootstrap Column</h1>
  <div class="row align-items-end" style="height: 200px;">
    <div class="col">First Column</div>
    <div class="col">Second columns</div>
    <div class="col">Third columns</div>
  </div>
   <!--/row-->
</div>
<!--/container-->
Try it now

Code Explanation

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

  • To align a single column at the top of container, you have to use class .align-self-start inside .row class.
  • To align a single column at the center of container, you have to use class .align-self-center inside .row class.
  • To align a single column at the bottom of container, you have to use class .align-self-end inside .row class.

General Syntax 

      <div class="container mt-5">
<div class="row">
  <div class="col align-self-start">First Column</div>
  <div class="col align-self-center">Second Column</div>
   <div class="col align-self-end">Third column</div>
</div><!--/row-->
</div><!--/container-->
Try it now

Source Code 

          <div class="container mt-5">
 <h2 class="text-center">Aligning Of Individual Column Inside Container</h2>
 <div class="row" style="height: 200px; background-color: cyan;">
  <div class="col align-self-start">First Column</div>
  <div class="col align-self-center">Second Column</div>
  <div class="col align-self-end">Third column</div>
 </div>
	<!--/row-->
</div>
<!--/container-->
Try it now

Code Explanation

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

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

Source Code 

          <div class="container bg-light pt-4">
 <h2 class="text-center my-5">Horizontal Column Alignment</h2>
 <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--->
</div>
<!--/container--->
Try it now

Code Explanation

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

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

General Syntax 

      <div class="row justify-content-center"></div>
Try it now

Source Code 

          <div class="container bg-light pt-4" >
   <h2 class="text-center my-5">Horizontal Column Alignment</h2>
   <div class="row justify-content-center">
     <div class="col-4">
        First Column of the existing row
     </div>
     <div class="col-4 ">
        Second Column of the existing row
     </div>
   </div>
   <!--/row-->
</div>
<!--/container-->
Try it now

Code Explanation

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

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

Source Code 

          <div class="container bg-light pt-4">
    <h2 class="text-center my-5">Horizontal Column Alignment</h2>
    <div class="row justify-content-end">
      <div class="col-4">
          First Column of the existing row
      </div>
      <div class="col-4">
            Second Column of the existing row
      </div>
    </div>
</div>
<!--container-->
Try it now

Code Explanation

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 the extra column is considered as one unit and wrapped 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">
<div class="row">
 <div class="col-9">.col-9</div>
 <div class="col-4">
  .col-4 <br> Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
 </div>
 <div class="col-6">
  .col-6 <br> First row second line last column
 </div>
</div>
</div>
Try it now

Column Break

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

Source Code 

          <div class="container">
 <h2 class="text-center my-5">Bootstrap Column Breaking</h2>
 <div class="row">
  <div class="col-6 col-sm-3 layout--design">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3 layout--design">.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 layout--design">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3 layout--design">.col-6 .col-sm-3</div>
 </div>
</div>
<!--/container-->
Try it now

Column break can be applied at a specific breakpoint.

General Syntax 

      <div class="row">
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 <div class="w-100 d-none d-md-block"></div>
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
<!--/row-->
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center my-5">Bootstrap Column Breaking At The Specific Break Point</h2>
 <div class="row">
   <div class="col-6 col-sm-4 layout--design">.col-6 .col-sm-4</div>
   <div class="col-6 col-sm-4 layout--design">.col-6 .col-sm-4</div>
        <!-- Force next columns to break to newline at MD breakpoint and up -->
   <div class="w-100 d-none d-md-block"></div>
   <div class="col-6 col-sm-4 layout--design">.col-6 .col-sm-4</div>
   <div class="col-6 col-sm-4 layout--design">.col-6 .col-sm-4</div>
 </div>
    <!--/row-->
</div>
<!--/container-->
Try it now

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).

General Syntax 

      <div class="row">
 <div class="col order-2"> First column with an order of 2</div>  
 <div class="col order-1 layout--design">Second Column, with an order of 1</div>
</div>
Try it now

Source Code 

          <div class="container">
 <h2 class="text-center my-5">Bootstrap Column Breaking At The Specific Break Point</h2>
<div class="row">
  <div class="col order-2 layout--design">
        First column without order
  </div>
  <div class="col order-5 layout--design">
        Second in DOM, with a larger order
  </div>
  <div class="col order-1 layout--design">
        Third in DOM, with an order of 1
  </div>
 </div>
</div>
<!--/container-->
Try it now

Code Explanation

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.

Bootstrap 5 column Offset

Bootstrap 5 column offset works 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 are 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">
    <h2 class="text-center my-5">Bootstrap Column Offset Concept</h2>
    <div class="row">
        <div class="col-md-3 layout--design">.col-md-3</div>
        <div class="col-md-3 offset-md-3 layout--design">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-3 offset-md-3 layout--design">.col-md-3 .offset-md-3</div>
        <div class="col-md-3 offset-md-3 layout--design">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-8 offset-md-2 layout--design">.col-md-8 .offset-md-2</div>
    </div>
</div>
<!--/container-->
Try it now

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap Columns
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software