17. Using grids and containers in Bootstrap

Bootstrap is one of the most popular tools when it comes to front-end web development. It is known for its ease of use and efficiency in creating responsive websites. One of the most notable features of Bootstrap is the use of grids and containers. In this chapter, we will dive into the use of grids and containers in Bootstrap.

Understanding the Container

Containers in Bootstrap are fundamental elements for creating responsive layouts. They are the basic building blocks of any Bootstrap web page. A container is simply a div with the class .container or .container-fluid. The difference between the two is that .container has a fixed maximum width in pixels on different screen sizes, while .container-fluid expands to fill the width of the screen.

<div class="container">
  <!-- Contents -->
</div>

<div class="container-fluid">
  <!-- Contents -->
</div>

Understanding the Grid

Bootstrap uses a grid system to create layouts. The grid is divided into 12 columns, allowing you to create complex and responsive layouts with ease. Grid classes are applied to divs to control page layout. Classes range from .col- (for extra-small devices like phones) to .col-xl- (for extra-large devices like large-scale TVs).

<div class="row">
  <div class="col-">
    <!-- Contents -->
  </div>
  <div class="col-">
    <!-- Contents -->
  </div>
</div>

Using Grids and Containers Together

To create a responsive layout in Bootstrap, you usually start with a container. Inside this container, you create a 'row', which is a horizontal line that contains columns. In front of the rows, you place your columns, which are where your content actually goes. The total sum of the columns in a row must be equal to 12.

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- Contents -->
    </div>
    <div class="col-6">
      <!-- Contents -->
    </div>
  </div>
</div>

In this example, we have two columns each taking up half the width of the screen (6/12) across all screen sizes. You can adjust the number after 'col-' to control the column width on different screen sizes.

Conclusion

Bootstrap grids and containers are powerful tools that let you create complex, responsive layouts with ease. They are the foundation of any Bootstrap web page and are essential to understand if you want to become an effective front-end developer. With practice, you will be able to create full-page layouts with ease, using just grids and containers.

I hope this chapter gave you a clear understanding of how to use grids and containers in Bootstrap. In the next chapter, we'll explore some more Bootstrap components and how they can be used to further improve your websites.

Next page of the Free Ebook:

64Bootstrap components: buttons, forms, carousel

7 minutes