Adaptive layouts with Bootstrap grid

Bootstrap’s grid system allows you to design responsive and adaptive layouts that work seamlessly across different devices (desktop, tablet, and mobile). It uses a flexible 12-column layout system that makes it easy to create complex designs while maintaining responsiveness.

In this guide, we’ll walk through how to use Bootstrap Grid to create adaptive layouts, including how to manage column sizes, offsets, and visibility across different screen sizes.

Step 1: Include Bootstrap in Your Project

To get started with Bootstrap, you need to include it in your project. If you haven’t already, you can include Bootstrap through its CDN (Content Delivery Network).

1.1. Adding Bootstrap via CDN

You can add the following code to the <head> section of your HTML document to include the Bootstrap CSS and JavaScript files.

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- Bootstrap JS (Optional, for interactive components) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Alternatively, you can download and host Bootstrap locally if you prefer.

Step 2: Understanding Bootstrap Grid System

The Bootstrap grid system is built around 12 columns, which can be divided up and combined depending on your layout needs. You can use these columns to build responsive layouts that adapt to different screen sizes.

2.1. Basic Structure of Grid

The basic structure of a grid in Bootstrap consists of a container (container or container-fluid), rows (row), and columns (col). Here’s an example of a basic grid structure:

<div class="container">
  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>

This will create a row with three equal-width columns.

Step 3: Adjusting Column Widths Based on Screen Size

Bootstrap uses breakpoints to adjust the layout for different screen sizes. The default breakpoints are:

xs (extra small): < 576px (phones)
sm (small): ≥ 576px (tablets)
md (medium): ≥ 768px (small laptops)
lg (large): ≥ 992px (larger laptops)
xl (extra large): ≥ 1200px (desktops)

Each of these breakpoints can be used to modify the number of columns or how wide each column should be at different screen sizes.

3.1. Example of Column Width Adjustment

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

col-12: On extra small screens (less than 576px), each column takes up 12 columns (full width).
col-sm-6: On small screens (576px or larger), each column takes up 6 columns (half-width).
col-md-4: On medium screens (768px or larger), each column takes up 4 columns (one-third width).
col-lg-3: On large screens (992px or larger), each column takes up 3 columns (one-fourth width).

This ensures that the layout adapts to various screen sizes. Columns will stack on smaller screens and be displayed side by side on larger screens.

Step 4: Column Offsets and Nesting

You can offset columns to create custom spacing between them, or nest columns inside a parent column to create more complex layouts.

4.1. Column Offsets

You can use offset classes to push columns to the right, creating space between columns.

<div class="container">
  <div class="row">
    <div class="col-6">Column 1</div>
    <div class="col-6 offset-3">Column 2 (offset by 3 columns)</div>
  </div>
</div>

In this example, Column 2 is offset by 3 columns, which pushes it to the right.

4.2. Nested Columns

You can also nest columns inside other columns to create multi-layered layouts.

<div class="container">
  <div class="row">
    <div class="col-8">
      Parent Column
      <div class="row">
        <div class="col-6">Nested Column 1</div>
        <div class="col-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-4">Side Column</div>
  </div>
</div>

Here, a nested row inside a parent column is used to create two smaller columns within the main column.

Step 5: Visibility and Responsiveness

Bootstrap offers utilities for controlling the visibility of elements based on screen size. You can use d-none, d-sm-block, d-md-none, etc., to hide or show elements on specific screen sizes.

5.1. Example of Visibility Classes

<div class="container">
  <div class="row">
    <div class="col-12 d-none d-md-block">Visible on medium and larger screens</div>
    <div class="col-12 d-md-none">Visible only on smaller screens</div>
  </div>
</div>

In this example:

The first div will only be visible on medium and larger screens.
The second div will only be visible on smaller screens (less than 768px).

Step 6: Customizing Grid with CSS

While Bootstrap provides a powerful grid system, sometimes you may need to add custom CSS to fine-tune your design or apply specific styles to certain elements.

6.1. Customizing Grid with CSS

/* Adjust grid spacing for larger screens */
@media (min-width: 992px) {
  .container {
    margin-top: 20px;
  }
  .row {
    gap: 30px;
  }
}

This custom CSS ensures that on large screens, there’s additional spacing between the columns (via the gap property), and the container has a top margin.

Step 7: Testing Responsiveness

Once you’ve built your layout, it’s important to test it on various devices:

Resize the browser window to see how the layout adapts.
Use device emulators in browser developer tools (Chrome, Firefox, etc.) to simulate various devices.
Test on real devices to ensure the layout looks and works well.