How to use offset in bootstrap 5?
April 26, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
Today, I am going to show you. how to use offset in bootstrap 5 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.
Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: rgb(239, 76, 101); color:white">.col-md-4</div>
<div class="col-md-4 offset-md-4" style="background-color: rgb(223, 239, 76); color:white">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3" style="background-color: rgb(53, 199, 68); color:white">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3" style="background-color: rgb(36, 210, 216); color:white">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3" style="background-color: rgb(172, 33, 210); color:white">.col-md-6 .offset-md-3</div>
</div>
</div>
</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 👍