Bootstrap Offset
The modern generation websites need to be perfect. A web developer works on the minute detailing of the website. The elements should be placed perfectly on the websites with neat spaces between the elements. Think about a webpage with no adequate space between the elements. Will it look good. Absolutely not!. Bootstrap resolves the space issues for us with an offset utility class.
How to use Bootstrap Offset
The default syntax of bootstrap offset is .offset. It is used for offsetting columns in the grid system ie, moving columns to the right. It also increases the left margin of a column by * columns. For example, .col-offset-4 moves column over 4 four columns.
An offset can be combined with different grid tiers. Use .offset-{breakpoint}-{value} where the breakpoint is sm, md , lg, xl, and value can be set by a numerical value like 0,1,2,3,4 .
Example: Using an offset utility class
Here in the example, the first row consists of two columns, the first column has no offset class whereas the second column has an offset of 4. That means send column will shift 4 columns toward the right. Also .md grid tier is included with column and offset. similarly, we have created the other two rows with offset -3 columns.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h2 class="text-center">Adding offset to columns</h2>
<div class="container border border-secondary">
<div class="row">
<div class="col-md-4 border border-primary">col without offset</div>
<div class="col-md-4 border border-primary offset-md-4">col with offset 4</div>
</div>
<div class="row">
<div class="col-md-3 border border-primary offset-md-3">col with offset 3</div>
<div class="col-md-3 border border-primary offset-md-3">col with offset 3</div>
</div>
<div class="row">
<div class="col-md-6 border border-primary offset-md-3">col with offset 3</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program
Example: Setting offset value
A single row of grid system consists of 12 columns. So if columns and offset value become greater than 12, the column will break to the next level. Let us see this with the example given below
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h2 class="text-center">Adding offset to columns</h2>
<div class="container border border-secondary">
<div class="row">
<div class="col-sm-3 border border-primary">col 1</div>
<div class="col-sm-3 border border-primary .offset-sm-2">col 2</div>
<div class="col-sm-3 border border-primary offset-sm-2">col 3</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Misc offset for any Screen
From Bootstrap 4 alpha 6 onwards the infix .xs has been removed for the smallest screen. Use .offset-value as default class to set offset to columns for any type of screen.
Example: Using default offset class
Here in the example, we have used the default offset class to set offset to columns for ant type of screen. We have removed the grid breakpoints from the above program.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js" ></script>
</head>
<body>
<h2 class="text-center">Adding offset to columns</h2>
<div class="container border border-secondary">
<div class="row">
<div class="col-3 border border-primary offset-2">col 1</div>
<div class="col-3 border border-primary offset-2">col 2</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So offset is used to create space between columns in the grid system. Add offset for better visibility of elements within the grid system.. Add responsive offset class for different screen sizes.
