Grid System

Grid Layout Components:

  • Container:

    • The Container element used for wraps your content.

    provides a fixed-width container for responsive layouts.

    There have a two types of containers: .container (fixed-width) and .container-fluid (full-width).

  • Row:

    • rows are horizontal groups of columns.

    Rows ensure proper alignment and padding.

  • Column:

    • Columns are placed within rows and are used to layout content.

    Bootstrap uses a 12-column grid system.

    Also you can specify the width of each column using classes like .col-, .col-sm-, .col-md-, .col-lg-, and .col-xl-.

Creating Responsive Layouts:

To create Responsive Layouts you can use the .container or .container-fluid class to create a container.

In the container, create a row using the .row class.

Divide the row into columns using column classes. For example, .col-6 creates a column that spans half the width of the row on all screen sizes.

Grid Breakpoints:

Bootstrap it provides five grid breakpoints to create responsive layouts, let's see below:

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

For example, .col-sm-6 creates a column that spans half the width of the row on small screens and above.

Example demonstrating these concepts:

                                      
                                      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-6 col-lg-4">Column 1</div>
        <div class="col-md-6 col-lg-4">Column 2</div>
        <div class="col-md-6 col-lg-4">Column 3</div>
    </div>
    <div class="row">
        <div class="col-6 col-md-4">Nested Column 1</div>
        <div class="col-6 col-md-4">Nested Column 2</div>
        <div class="col-12 col-md-4">Nested Column 3</div>
    </div>
</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>