Creating Responsive Layouts Using Bootstrap CSS

Introduction

Bootstrap’s grid system is built with a flexible layout model that enables responsive design. By using rows and columns, Bootstrap makes it easy to create layouts that adapt to various screen sizes, from mobile to desktop. In this guide, we'll explore how to create a responsive layout using Bootstrap’s grid system.

Responsive Grid System Basics

The Bootstrap grid system uses containers, rows, and columns to create responsive layouts:

• Container: Wraps the grid system and provides responsive width adjustments.
• Row: Defines a horizontal group of columns.
• Column: Defines the content area within the row. Columns can be sized for different screen widths using predefined classes.

Basic Responsive Layout

Here’s a simple example of a responsive layout that adapts from a two-column layout on larger screens to a single-column layout on smaller screens:

    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <p>Column 1</p>
            </div>
            <div class="col-md-6">
                <p>Column 2</p>
            </div>
        </div>
    </div>
                

Explanation

• The `container` class centers and adds padding to the layout.
• The `row` class creates a horizontal group of columns.
• The `col-md-6` class means each column will take up 6 out of 12 grid spaces on medium screens (768px and up). On smaller screens, these columns stack vertically.

Code Examples

Example 1: Three-Column Layout

This example shows a layout with three columns that stack on smaller screens:

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

Explanation

• `col-lg-4`: Each column takes up one-third (4 out of 12 spaces) on large screens (≥992px).
• `col-md-6`: Each column takes up half the row (6 out of 12 spaces) on medium screens (≥768px).
• `col-sm-12`: Each column spans the full row width on small screens (≤576px), stacking vertically.

Expected Output:

Responsive Utility Classes

Bootstrap also includes responsive utility classes that allow you to show or hide content based on screen size.

Example: Show/Hide Content Based on Screen Size

    <div class="container">
        <div class="d-none d-sm-block">
            <p>This content is hidden on extra-small screens.</p>
        </div>
        <div class="d-block d-md-none">
            <p>This content is only visible on small screens.</p>
        </div>
    </div>
                

Explanation

• `d-none d-sm-block`: Hides content on extra-small screens (<576px) and displays it on larger screens.
• `d-block d-md-none`: Displays content only on small screens (≥576px and <768px).