How to Use Containers and the Grid System?

Breakpoints Used by Containers

Breakpoints represent threshold values that allow you to adapt your layout based on screen size. Note that fluid containers ignore these breakpoints.

Bootstrap containers use Flexbox technology.

Bootstrap Offers Three Types of Containers

1. Default Container

The .containeur class is commonly used to create a container.
It provides a fixed maximum width that adapts to different breakpoints, ensuring a responsive layout.

<!-- HTML code using a default container -->
<div class="container">
  <h1>Bienvenue sur notre site</h1>
  <p>The fixed container adapts to different breakpoints.</p>
</div>

When the screen is between two breakpoints, the container adjusts to the maximum width of the smaller breakpoint.
You will notice that the difference in width is distributed in the left and right margins, allowing the content to be centered.

2. Fluid Container

The fluid container (.containeur‑fluidclass) occupies 100% of the parent element, regardless of the breakpoint.

<!-- HTML code using a fluid container -->
<div class="container-fluid">
  <h1>Welcome to our website</h1>
  <p>The fluid container takes 100% of the width.</p>
</div>

Unless you divide it into multiple columns, a fluid container can create excessively long lines on a large screen, making the text more difficult to read. In another article, you will discover solutions to improve your layouts based on a fluid container.

3. Responsive Containers

Responsive containers, found under the .container‑{breakpoint} classes, are variants of the default container.
They occupy 100% of the width up to a specified breakpoint, then adapt to the higher breakpoints.

<!-- HTML code using a responsive container -->
<div class="container-md">
  <h1>Welcome to our website</h1>
  <p>This container is fluid up to 720px and then adapts to other breakpoints.</p>
</div>

The {breakpoint} part of the class name can take one of the following values: sm, md, lg, xl or xxl.

You Can Use Containers in Several Ways:

• Use them directly with content, as in the three examples above.
• Apply a simple grid system with rows and columns.
• Adopt a complex grid system that includes nesting.

Basic Grid Structure Based on Flexbox Architecture

The Bootstrap grid is based on three key elements: containers, .row and .col* columns.
Containers wrap the rows, which then contain the columns.
This hierarchy ensures correct alignment and spacing of the columns.

Flexbox utility classes allow you to justify or align content within the rows.

Space Columns Using Gutters

Gutter utility classes help you manage the horizontal and vertical spacing between columns. Here is a summary of the available values for gutters .g{x-y}-{0-5}:

Column Management Classes

Bootstrap offers you a variety of column classes that allow you to create flexible and responsive layouts according to breakpoints. You have several types of columns to create more or less complex grids.

You define columns using specific classes that determine their width based on the number of columns they occupy. For example, the .col-md-6 class indicates that the column occupies 6 of the 12 available columns, or half the width.

Flexible columns are also a powerful feature of Bootstrap. By simply using the .col class, you automatically adjust columns to occupy the available space equally. This is particularly useful for creating flexible layouts without having to specify precise widths.

The {breakpoint} part of the class names can take one of the following values: xs, sm, md, lg, xl or xxl.
The {1-12} part of the class names can take a value between 1 and 12.

Conclusion

By using Bootstrap's containers and grid system, you optimize the structure and presentation of your web pages. You can easily adapt your layout to all devices, thereby ensuring a smooth and pleasant user experience. Breakpoints allow you to effectively manage screen size variations, while Flexbox and gutter utility classes offer precise control over the alignment and spacing of your elements.

By integrating these tools into your projects, you create layouts that are both aesthetically pleasing and functional. Explore Bootstrap's possibilities to design modern, responsive websites that captivate your users. Adopt these practices today to enhance the quality of your digital creations!

Last modification  2024-07-22