bootstrap
  1. bootstrap-row-columns
PreviousNext

Bootstrap Grid System

  • Bootstrap has a powerful grid system that helps developers create responsive layouts for their websites.
  • The grid system is based on rows and columns and allows you to create complex layouts with ease.

Syntax

To use the Bootstrap grid system, you need to use the following classes:

  • .row: This class creates a row.
  • .col: This class creates a column.
  • .col-{breakpoint}-{number}: This class sets the width of the column for different breakpoints. The breakpoints can be xs, sm, md, lg, and xl. The number can be between 1 and 12.

Example

Here is an example of how to create a basic layout using the Bootstrap grid system:

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <p>This is column 1.</p>
    </div>
    <div class="col-sm-6 col-md-4">
      <p>This is column 2.</p>
    </div>
    <div class="col-sm-12 col-md-4">
      <p>This is column 3.</p>
    </div>
  </div>
</div>
Try Playground

Alignment

The alignment of each column individually with any of the responsive .align-self-* classes.

<div class="container text-center">
    <div class="row">
        <div class="col align-self-start border">
            column 1
        </div>
        <div class="col align-self-center border">
            column 2
        </div>
        <div class="col align-self-end border">
            column 3
        </div>
    </div>
</div>
Try Playground

Horizontal alignment

Change the horizontal alignment with any of the responsive justify-content-* classes.

<body>
    <div class="container text-center">
        <div class="row justify-content-start">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-end">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-around">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-between">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
        <div class="row justify-content-evenly">
            <div class="col-4 border">
                One of two columns
            </div>
            <div class="col-4 border">
                One of two columns
            </div>
        </div>
    </div>
</body>
Try Playground

Explanation

In the example above, we used the following classes:

  • .container: This class creates a container for the grid system.
  • .row: This class creates a row.
  • .col-sm-6 col-md-4: This class sets the width of the columns. On smaller screens, the columns will take up 6 columns each, and on medium screens and above, they will take up 4 columns each.

Use

You can use the Bootstrap grid system to create various layouts, including:

  • Simple rows and columns
  • Nested rows and columns
  • Offset columns
  • Reordering columns
  • And more

Important Points

  • The Bootstrap grid system is based on rows and columns.
  • You can set the width of the columns using classes, with a maximum of 12 columns per row.
  • You can use the grid system to create complex and responsive layouts for your website.

Summary

The Bootstrap grid system is a powerful tool that helps developers create responsive and mobile-first layouts for their websites. By using the classes provided, you can create complex and visually appealing layouts in a matter of minutes.

GridHeadings
Published on: