Bootstrap 5 Offsetting columns can offset grid columns in two ways, offset classes and margin utilities. Offset classes are used to match the size of columns and margin utilities are used for quick layouts.
Bootstrap 5 Offsetting columns:
- Offset classes: This class is used to set the offset of the grid. Size is the among small (sm), medium (md), and large (lg).
- Margin utilities: This utility is used to set the margin between columns. you can use margin utilities to force sibling columns away from one another using .me-auto class.
Example 1: In this example, we will see the offset class.
HTML
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>Bootstrap5 Columns Offsetting columns</h3>
<div class="row m-2">
<div class="col-md-4 offset-md-0
border bg-primary">
GeekforGeeks
</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3
border bg-secondary">
GeekforGeeks
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3
border bg-info">
GeekforGeeks
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will see the Margin utilities.
HTML
<!DOCTYPE html><html>
<head>
<!-- Bootstrap CDN -->
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body class="m-2">
<h1 class="text-success"> GeeksforGeeks </h1>
<h3>Bootstrap5 Columns Offsetting columns</h3>
<div class="container">
<div class="row">
<div class="col-md-4 me-auto border bg-danger">GFG</div>
<div class="col-md-4 border bg-info">GFG</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/layout/columns/#offsetting-columns