how to use offset in bootstrap 4?

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

Bootstrap, Offset-4

All the best 👍