Open In App

How to keep gap between columns using Bootstrap?

Improve
Improve
Like Article
Like
Save
Share
Report

We can keep gap between columns by using normal CSS but here we will use the Bootstrap framework for that. In this article, we will keep a measured gap between columns by the following methods.

Using “div” tag: Simply adding a “div” with padding in between two “div” tags gives spacing between the “div”.

Example:




<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width,
                     initial-scale=1
                     shrink-to-fit=no"/>
   
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href=
            integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
            crossorigin="anonymous" />
   
        <style media="screen">
            .a {
                padding: 50px;
            }
        </style>
    </head>
   
    <body>
        <div class="row">
            <div class="col-4 bg-success a">
                One of two columns
            </div>
            <div class="col-4"><!--extra div--></div>
            <div class="col-4 bg-danger a">
                One of two columns
            </div>
        </div>
    </body>
</html>


Output:

  • Image without the extra “div” tag:

  • Image with the extra “div” tag:

Method using columns offset: The offset class is used to increase the left margin of a column. The class col-md-offset-2 moves col-md-3 by 3 columns.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1,
                       shrink-to-fit=no" />
  
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href=
              integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
              crossorigin="anonymous" />
        <style media="screen">
            .a {
                padding: 50px;
            }
        </style>
    </head>
    <body>
        <!--using offset-->
        <div class="row">
            <div class="col-md-5 bg-success a">geeksforgeeks</div>
            <div class="col-md-5 bg-danger offset-2 a">
                geeksforgeeks
            </div>
        </div>
    </body>
</html>


Output: This output may not match with the given output image because the screen size of the output is smaller.

  1. Image without offset:

  2. Image with offset:



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads