How to use offset in bootstrap 5?

Hi 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.


Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
    <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="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <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 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 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>

In the above code, we have used .offset class to border a div in bootstrap

Check the output of the above code example.

Bootstrap, Offset-5

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

I'm working on some more Cheat Sheets book on Jquery, TypeScript, React js and for other languages. I will send it once it's completed.

Related Posts