Prev Next

BS5 Grid Small

The Bootstrap 5 Grid Small system is designed for small devices with a screen width of 576px or more. Use .col-sm-* classes to define column layouts specifically for small screens.

Key Topics

Basic Small Columns

Create grid columns for small devices using the .col-sm-* classes.

<div class="container">
    <div class="row">
        <div class="col-sm-6">Small Column 1</div>
        <div class="col-sm-6">Small Column 2</div>
    </div>
</div>

Explanation: The .col-sm-* classes allow you to create columns specifically for devices with a screen width of 576px or more.

Nested Small Columns

Nest rows and columns inside a small column for complex layouts on small screens.

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            Small Parent Column
            <div class="row mt-2">
                <div class="col-sm-6">Nested Column 1</div>
                <div class="col-sm-6">Nested Column 2</div>
            </div>
        </div>
    </div>
</div>

Explanation: Use the .col-sm-* classes inside nested rows to create advanced layouts for small devices.

Custom Width for Small

Adjust column widths for small devices by specifying the number of grid units using the .col-sm-* classes.

<div class="container">
    <div class="row">
        <div class="col-sm-4">Small Column 1 (4 units)</div>
        <div class="col-sm-8">Small Column 2 (8 units)</div>
    </div>
</div>

Explanation: Define custom column widths for small screens using .col-sm-*.

Complete Small Grid Example

Below is a complete example demonstrating the grid system for small devices, including basic, nested, and custom-width columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid Small Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2 class="text-center">Bootstrap Grid Small</h2>
        <div class="row mb-3">
            <div class="col-sm-6">Small Column 1</div>
            <div class="col-sm-6">Small Column 2</div>
        </div>
        <div class="row mb-3">
            <div class="col-sm-12">
                Parent Column
                <div class="row mt-2">
                    <div class="col-sm-6">Nested Column 1</div>
                    <div class="col-sm-6">Nested Column 2</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">Custom Column 1</div>
            <div class="col-sm-8">Custom Column 2</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates how to create basic, nested, and custom-width columns for small screens using the Bootstrap grid system.

Key Takeaways

  • Use .col-sm-* classes to create responsive grid layouts for small screens (576px and above).
  • Nest rows and columns for advanced layouts on small devices.
  • Customize column widths by defining specific grid units for small screens.
Prev Next