bootstrap
  1. bootstrap-grid
PreviousNext

Bootstrap Grid System

Bootstrap provides a powerful grid system for creating flexible and responsive layouts.

Syntax

To use the Bootstrap grid system, you need to include the following classes in your HTML:

  • .container: this class creates a centered container with a fixed width.
  • .row: this class creates a horizontal row to contain columns.
  • .col-*: this class creates a column that takes up the specified number of grid columns.

Example

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

<div class="container text-center">

    <div class="row ">
        <div class="col border">Col 1</div>
        <div class="col border">Col 2</div>
        <div class="col border">Col 3</div>
        <div class="col border">Col 4</div>
        <div class="col border">Col 5</div>
        <div class="col border">Col 6</div>
        <div class="col border">Col 7</div>
        <div class="col border">Col 8</div>
        <div class="col border">Col 9</div>
        <div class="col border">Col 10</div>
        <div class="col border">Col 11</div>
        <div class="col border">Col 12</div>
    </div>
    <div class="row">
        <div class="col-3 border">Column 1</div>
        <div class="col-3 border">Column 2</div>
        <div class="col-3 border">Column 3</div>
        <div class="col-3 border">Column 4</div>
    </div>
    <div class="row">
        <div class="col-4 border">Column 1</div>
        <div class="col-4 border">Column 2</div>
        <div class="col-4 border">Column 3</div>
    </div>
    <div class="row">
        <div class="col-4 border">Column 1</div>
        <div class="col-8 border">Column 2</div>
    </div>
    <div class="row">
        <div class="col-6 border">Column 1</div>
        <div class="col-6 border">Column 2</div>
    </div>
    <div class="row">
        <div class="col-12 border">Column 1</div>
    </div>
</div>
Try Playground

Example

<div class="container">
  <div class="row">
    <div class="col-md-4 border">Column 1</div>
    <div class="col-md-4 border">Column 2</div>
    <div class="col-md-4 border">Column 3</div>
  </div>
</div>
Try Playground

Explanation

In the code above, we used the following classes to create the grid:

  • container: this class creates a centered container with a fixed width.
  • row: this class creates a horizontal row to contain columns.
  • col-md-4: this class creates a column that takes up 4 of the 12 available grid columns on medium-sized screens. The md prefix stands for medium-sized screens. On smaller screens, the columns will stack vertically, and on larger screens, they will take up more columns as specified by their respective classes.

Use

The Bootstrap grid system can be used to create a variety of layouts, from simple rows and columns to more complex designs with nested rows and columns.

Important Points

  • The Bootstrap grid system is based on a 12-column layout.
  • Columns in a row must add up to 12 columns or less.
  • The responsive classes (col-sm-, col-md-, col-lg-, col-xl-) can be used to create responsive layouts that display differently on various screen sizes.
  • You can nest rows and columns to create more complex layouts.

Summary

The Bootstrap grid system is a flexible and responsive way to create layouts for your website. By using the .container, .row, and .col-* classes, you can create a variety of layouts that look great on any screen size.

ContainerRow Columns
Published on: