Prev Next

Offset Columns: Using offset-* Classes to Create Gaps Between Columns

Bootstrap 5 provides offset-* classes to create spacing or gaps to the left of columns. These classes work with the grid system to align columns effectively without leaving unused space.

Key Topics

Basic Offsets with offset-* Classes

Use offset-* classes to move a column to the right by a specific number of grid units. For example, offset-4 moves the column right by 4 units.

<div class="container">
    <div class="row">
        <div class="col-4 offset-4">Centered Column</div>
    </div>
</div>

Explanation: The offset-4 class moves the column 4 grid units to the right, centering it within a 12-column grid.

Responsive Offsets

Specify offsets for different breakpoints using classes like offset-sm-*, offset-md-*, etc.

<div class="container">
    <div class="row">
        <div class="col-6 offset-md-3">Centered on Medium</div>
    </div>
</div>

Explanation: The offset-md-3 class moves the column to the right by 3 grid units on medium devices, centering it within a row.

Combining Offsets and Columns

Combine offsets with other column classes to create customized layouts.

<div class="container">
    <div class="row">
        <div class="col-3 offset-3">Offset Column</div>
        <div class="col-3">Normal Column</div>
    </div>
</div>

Explanation: The first column is offset by 3 grid units, leaving space on its left, while the second column occupies its normal position.

Complete Offset Example

The following example demonstrates various uses of the offset-* classes, including responsive offsets and combined layouts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Offset Example</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 Offset Classes</h2>
        <div class="row mb-3">
            <div class="col-4 offset-4">Centered Column</div>
        </div>
        <div class="row mb-3">
            <div class="col-6 offset-md-3">Centered on Medium Devices</div>
        </div>
        <div class="row">
            <div class="col-3 offset-3">Offset Column</div>
            <div class="col-3">Normal Column</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 combines various offset-* classes to demonstrate how they affect the placement of columns in different layouts.

Key Takeaways

  • Use offset-* classes to add spacing on the left of columns.
  • Apply breakpoint-specific classes like offset-md-* for responsive offsets.
  • Combine offsets with other column classes for advanced layouts.
  • Ensure total grid units (columns + offset) do not exceed 12 per row.
Prev Next