How to use offset in bootstrap 3?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to use offset in bootstrap 3 with code example.

Here, we will use .offset class to make a use offset in bootstrap.



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">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        /* Some custom styles to beautify this example */
        .row {
            background: #6e6ede;
        .demo-content {
            padding: 25px;
            font-size: 18px;
            background: #efdf7c;

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <div class="demo-content">.col-xs-6</div>
            <div class="col-xs-3 col-sm-4">
                <div class="demo-content">.col-xs-3</div>
            <div class="col-xs-4 col-xs-offset-3">
                <div class="demo-content">.col-xs-4</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-3

All the best 👍

Premium Content

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


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

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.

Related Posts