Building a Responsive Layout with Bootstrap Grid: Discover How to Adapt Your Designs to Different Screen Sizes Using Bootstrap’s Grid System Classes.

by
Tiempo de lectura: 2 minutos

Reading Time: 3 minutes

Good morning! In today’s tutorial, I’m going to talk about the Bootstrap GRID structure.

The Bootstrap grid system is one of the most prominent and useful features of this CSS framework. It provides a structure of rows and columns that allows for easy creation of flexible and responsive layouts.

The Bootstrap grid system is based on a 12-column grid. Each row is divided into columns that add up to a total of 12 units. The columns can be combined and adjusted to create layouts that adapt to different screen sizes.

To use the Bootstrap grid system, predefined CSS classes are applied to HTML elements. Here’s how the main classes are used:

  1. .container: This class wraps all the content of the page and sets a maximum width and automatic side margins to center the content. It’s the main container of the Bootstrap grid.
  2. .row: Used to create a row and group columns together. Rows should be contained within a .container or .container-fluid.
  3. .col: This class is used to define a column. You can specify the number of columns it occupies at different breakpoints using responsive classes. For example, .col-md-6 indicates that the column will occupy 6 columns on medium devices (md), while .col-lg-4 indicates it will occupy 4 columns on large devices (lg).
  4. .offset: Used to add left-side offset space to a column. For example, .offset-md-3 adds an offset space of 3 columns on medium devices.

In addition to these basic classes, Bootstrap offers variations and combinations of classes to adapt columns to different screen sizes and create complex layouts. Some of the most common classes include:

  • .col-sm-*: Specifies the number of columns a column occupies on small devices (sm).
  • .col-md-*: Specifies the number of columns a column occupies on medium devices (md).
  • .col-lg-*: Specifies the number of columns a column occupies on large devices (lg).
  • .col-xl-*: Specifies the number of columns a column occupies on extra-large devices (xl).
  • .col-*-offset-*: Adds a left-side offset space to a column at a specific breakpoint.

Below is a table showing the breakpoints and at what sizes they take effect:

Here’s a basic example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
    <title>Your Bootstrap Page</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>

    <div class="row">
        <div class="col-md-6 bg-warning">
            First Column
        </div>
        <div class="col-md-6 bg-primary">
            Second Column
        </div>
        
    </div>

</body>

</html>

In the above example, starting from 768px (md) and above, the columns will be distributed in 2 columns, as 6+6 = 12, which is the total number of columns in Bootstrap.

When starting the layout, it’s recommended to use a “Mobile-First” approach and build up from there.

I hope you find this helpful, and most importantly, I hope it serves you well. If you have any questions, feel free to leave a comment. And if you like it, please give us your :red_heart:.

Post Views: 0

Leave a Comment