Offsetting Columns

In Bootstrap 4, "offsetting" columns means shifting columns to the right, leaving empty space to the left of the columns. This is useful for centering columns or creating gaps between columns. Offsetting is done using .offset-* classes where * is the column size (1-12).

Here's a breakdown of how to use offsetting columns in Bootstrap 4 with examples:

Basic Example

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

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="p-3 bg-primary text-white">Column 1</div>
    </div>
    <div class="col-4 offset-4">
      <div class="p-3 bg-secondary text-white">Column 2</div>
    </div>
  </div>
</div>

</body>
</html>

Explanation

The first column (col-4) takes up 4 units of the 12-unit grid.
The second column (col-4 offset-4) takes up 4 units but is shifted to the right by 4 units, leaving an empty space of 4 units to the left.

More Examples

Centering a Single Column

To center a single column, you can offset it so that the combined column and offset width equals 12.

<div class="container">
  <div class="row">
    <div class="col-6 offset-3">
      <div class="p-3 bg-info text-white">Centered Column</div>
    </div>
  </div>
</div>

Creating Gaps Between Columns

<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="p-3 bg-warning text-white">Column 1</div>
    </div>
    <div class="col-3 offset-3">
      <div class="p-3 bg-danger text-white">Column 2</div>
    </div>
  </div>
</div>

Responsive Offsetting

You can also use responsive offsetting classes to adjust the layout at different screen sizes.

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="p-3 bg-primary text-white">Column 1</div>
    </div>
    <div class="col-md-4 offset-md-4">
      <div class="p-3 bg-secondary text-white">Column 2</div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-3 offset-md-3">
      <div class="p-3 bg-success text-white">Responsive Column</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="p-3 bg-danger text-white">Column</div>
    </div>
  </div>
</div>

Explanation

col-md-4: The column takes up 4 units on medium (≥768px) screens and larger.
offset-md-4: The column is offset by 4 units on medium (≥768px) screens and larger.
col-sm-6: The column takes up 6 units on small (≥576px) screens and larger.
offset-md-3: The column is offset by 3 units on medium (≥768px) screens and larger.

These examples demonstrate how to use Bootstrap 4 offset classes to control the spacing and alignment of columns in a responsive grid layout.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us