how to use offset in bootstrap 4?
April 26, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. how to use offset in bootstrap 4 with code example.
Here, we will use .offset class to make a use offset in bootstrap.
Which will offset the desired column element with 3 columns to the right from its default position on medium screen sizes and above. .offset classes always shifts its content to the right.
This whole thing put together results .offset-md-3
Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<style>
/* Some custom styles to beautify this example */
.content {
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 10px;
}
.content.bg-change {
background: #abb1b8;
}
</style>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-md-3">
<div class="content">.col-md-3</div>
</div>
<div class="col-md-9">
<div class="content bg-change">.col-md-9</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="content bg-change">.col-md-6 .offset-md-3</div>
</div>
<div class="col-md-3">
<div class="content">.col-md-3</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="content">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="content bg-change">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="content">.col-md-3</div>
</div>
<div class="col-md-3">
<div class="content bg-change">.col-md-3</div>
</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">
<div class="content bg-change">.col-md-3 .offset-md-3</div>
</div>
<div class="col-md-3 offset-md-3">
<div class="content">.col-md-3 .offset-md-3</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>In the above code, we have used .offset class to border a div in bootstrap
Check the output of the above code example.
All the best 👍