Building a Responsive Design with Bootstrap Grid: Discover How to Adapt Your Layouts to Different Screen Sizes Using Bootstrap Grid System Classes.

by
Tiempo de lectura: 2 minutos

Reading time: 3 minutes

Good morning, in today’s tutorial, I’m going to talk to you about the GRID structure of BOOTSTRAP.

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 the entire content of the page and sets a maximum width and automatic side margin to center the content. It is the main container of the Bootstrap grid.
  2. .row: Used to create a row and group columns. Rows must 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-sized devices (md), while .col-lg-4 indicates it will occupy 4 columns on large devices (lg).
  4. .offset: Used to add a left offset space to a column. For example, .offset-md-3 adds an offset space of 3 columns on medium-sized 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 are:

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

Here’s a table with the breakpoints and when the layout changes based on the screen size:

Here’s a basic example:

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

<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 example above, starting from 768 (md)upwards, the columns are distributed in 2 columns since 6+6 = 12, which is the total number of Bootstrap columns.

When starting to layout, it’s recommended to do it first mobile and then work your way up.

I hope you like it, but most importantly, I hope it serves you well. If you have any questions, feel free to leave a comment, and if you like it, give us your ❤️

|

Post Views: 2

Leave a Comment