Bootstrap - Columns

This chapter will discuss about Bootstrap columns. The flexbox grid system allows you to modify columns with various alignment, ordering, and offsetting options. Using column classes, you can control the widths of non-grid items.

Before learning how to change and customise your grid columns, be sure to read the Grid page first.

How it works

  • On the flexbox architecture of the grid, columns are built. Flexbox allows changing of specific columns and groups of columns at the row level.

  • When creating grid layouts, all content is placed in columns. Bootstrap grid's hierarchy goes from the container to the row to the column to your content. There may be unforeseen repercussions when you combine the content and column.

  • For generating responsive layouts, Bootstrap provides predefined classes. Each grid tier has six breakpoints and a dozen of columns. Bootstrap provides many classes to create your desired layouts.

Alignment

Align columns vertically and horizontally using flexbox alignment utilities.

Vertical alignment

Use vertical-alignment utilities to changes the alignment of elements vertically.

  • Use the align-items-start class to align content vertically at starting position.

  • Use the align-items-center class to align content vertically at center.

  • Use the align-items-end class to align content vertically at the end.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <h5>Align the content at start</h5>
      <div class="row align-items-start bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at center</h5>
      <div class="row align-items-center bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at end</h5>
      <div class="row align-items-end bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
    </div>
  </body>
  </html>

Adjust the alignment of each column separately using .align-self-* classes.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-4">
        <div class="row  bg-warning" style="min-height: 80px;">
          <div class="col align-self-start bg-info">
            First Column
          </div>
          <div class="col align-self-center bg-info">
            Second Column
          </div>
          <div class="col align-self-end bg-info">
            Third Column
          </div>
        </div>
      </div>
    </body>
    </html>

Horizontal alignment

Horizontal alignment can be alter using justify-content-* classes to align the columns horizontally.

  • Use justify-content-start to align columns from start.

  • Use justify-content-center to align columns at the center.

  • Use justify-content-end to align columns at the end.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5>Align the columns at start</h5>
      <div class="row justify-content-start bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at center</h5>
      <div class="row justify-content-center bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
         First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at end</h5>
      <div class="row justify-content-end bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second column
        </div>
      </div>
    </div>
  </body>
  </html>

  • Use justify-content-around to equalise the spacing around the two columns.

  • Use justify-content-between to add space between the two columns.

  • Use justify-content-evenly class to add an equal space between the right and left columns of two desired columns.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5 class="mt-4">Add space between the two columns using justify-content-around</h5>
      <div class="row justify-content-around bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add space between the two columns using justify-content-between.</h5>
      <div class="row justify-content-between bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add equal space between columns using justify-content-evenly.</h5>
      <div class="row justify-content-evenly bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
    </div>
  </body>
  </html>

Column wrapping

If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <div class="row mt-2">
          <div class="col-2 bg-warning">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-6 bg-info">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-9 bg-primary">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
        </div>
      </div>
    </body>
    </html>

Column breaks

To break the column to a new line in flexbox, add a div element with a 100% width, after the column where you want to break the row. This normally occurs with multiple .rows, although not all implementation methods are suitable for this.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row mt-2">
          <div class="col-6 col-sm-3 bg-info">First Column</div>
          <div class="col-6 col-sm-3 bg-warning">Second Column</div>
      
          <div class="w-100"></div>
    
          <div class="col-6 col-sm-3 bg-primary">Third Column</div>
          <div class="col-6 col-sm-3 bg-secondary">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

You can also use responsive display utilities to apply this break at particular breakpoints.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col-6 col-sm-4  bg-info">First Column</div>
          <div class="col-6 col-sm-4  bg-warning">Second Column</div>
      
          <div class="w-100 d-none d-md-block"></div>
      
          <div class="col-6 col-sm-4 bg-primary">Third Column</div>
          <div class="col-6 col-sm-4 bg-light">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

Reordering

Bootstrap's column order classes adjust the grid system's order based on various screen sizes.

Order classes

The visual order of your content is controlled using .order- classes. Because these classes are responsive, you can sort them by breakpoint (e.g., .order-2 order-md-3). Support for values 1 to 5 across all grid tiers is included. The default number of .order-* classes can be modified via Sass variable.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row">
          <div class="col bg-info">
            no order applied.
          </div>
          <div class="col order-5 bg-warning">
            with an order of 5.
          </div>
          <div class="col order-1 bg-primary">
            with an order of 1.
          </div>
        </div>
      </div>
    </body>
    </html>

Additionally, the responsive classes .order-first and .order-last can be used to reorder elements by using order: -1 and order: 6, respectively. You can combine these classes with numbered .order-* classes as required.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col order-last bg-info">
            First column as ordered last
          </div>
          <div class="col order-first bg-primary">
            Second column as ordered first
          </div>
          <div class="col bg-warning">
            Third column (unordered)
          </div>
        </div>
      </div>
    </body>
    </html>

Offsetting columns

The grid columns offset can be achieved in two ways:

Grid classes are sized to match columns, While margins are more suitable for quick layouts with variable offset width.

Offset classes

Use .offset-md-* classes to shift the columns from their original position to the right side. These classes add *columns to the left margin of a column. The class .offset-md-4 shifts .col-md-4 to the right by four columns.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-2 bg-info p-2">First Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-3 bg-warning p-2">Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-2 bg-info p-2">Third Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-4 bg-warning p-2">Fourth Column</div>
      </div>
    </div>
  </body>
  </html>

Column clearing at responsive breakpoints

You need to reset the offsets at responsive breakpoints to clear columns. View the grid example for a demonstration.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-sm-5 col-md-6 bg-warning">First Row First Column</div>
        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0 bg-info">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-sm-6 col-md-5 col-lg-6 bg-warning">Second Row First Column</div>
        <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0  bg-info">Second Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

Margin utilities

In version 4, flexbox allows you to utilize margin utilities such as .me-auto to separate sibling columns from each other

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-4 bg-info"> First Row First Column</div>
        <div class="col-md-4 ms-auto bg-warning">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-3 ms-md-auto bg-info">Second Row First Column</div>
        <div class="col-md-3 ms-md-auto bg-warning">Second Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-auto me-auto bg-info">Third Row First Column</div>
        <div class="col-auto bg-warning">Third Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

Standalone column classes

To provide a specific width for an element, use .col-* classes outside a .row. The paddings are omitted when column classes are used as non-direct children of a row.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="col-3 p-2 mb-2 bg-info">
     First Column
    </div>
    <div class="col-sm-6 p-2 bg-warning">
      Second Column
    </div>
  </body>
  </html>

To create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="clearfix">
      <img src="\bootstrap\images\tut.png" class="col-sm-2 float-sm-end mb-2 ms-sm-2" alt="...">
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. create responsive floated images, combine the classes with utilities.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
    </div>
  </body>
  </html>
Advertisements