Bootstrap Grids

Bootstrap is a popular front-end framework used for building responsive and mobile-first websites. It provides a grid system that helps to arrange and align content on a page.

In this guide, we will cover the basics of the Bootstrap Grid System and how to use it effectively.

Setting up the Bootstrap Grid System

To use the Bootstrap Grid System, you need to include the Bootstrap CSS and JavaScript files in your project.

The simplest way to do this is to include the Bootstrap CDN links in the <head> section of your HTML file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

The Basic Structure of Bootstrap Grid

The Bootstrap Grid System is based on 12 columns. The grid is divided into 12 equal parts, each representing a single column.

To create a layout, you need to divide the page into rows and then use the grid classes to specify the number of columns each element should occupy.

Here is the basic structure of the Bootstrap Grid System:

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
</div>

The .container class is used to create a container for the grid. The .row class creates a row and the .col-md-4 class creates a column with a width of 4 out of 12 columns.

In this example, each column takes up one-third of the row's width.

Breakpoints in Bootstrap Grid System

Bootstrap's Grid System provides several breakpoints to control how the grid adapts to different screen sizes.

The breakpoints are:

  • xs (extra small devices)
  • sm (small devices)
  • md (medium devices)
  • lg (large devices)
  • xl (extra large devices)

Each breakpoint class (e.g. .col-md-4) specifies the number of columns a content block should occupy at that breakpoint.

You can use multiple breakpoint classes to specify how a content block should behave at different screen sizes.

For example, to have a content block take up 4 columns on medium screens and 6 columns on large screens, you would use the following code:

<div class="col-md-4 col-lg-6">Content</div>

Nesting Columns in Bootstrap Grid System

The Bootstrap Grid System allows you to nest columns within columns. This is useful when you need to create more complex layouts.

To nest columns, simply place another .row class inside a column. The inner row acts as a new row within the column and can have its own set of columns.

Here is an example of a nested grid:

<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-6">.col-md-6</div>
                <div class="col-md-6">.col-md-6</div>
            </div>
        </div>
        <div class="col-md-3">.col-md-3</div>
    </div>
</div>

In this example, the first column takes up 9 columns of the outer row and the second column takes up 3 columns.

Within the first column, there is another row with two columns, each taking up 6 columns.

Conclusion

The Bootstrap Grid System provides a flexible and easy way to arrange and align content on a page. With its breakpoints and nesting capabilities, it is a powerful tool for creating responsive and mobile-first websites.

By understanding the basic structure and features of the Bootstrap Grid System, you can create complex layouts that adapt to different screen sizes.

Bootstrap Basics