Skip to content
Related Articles

Related Articles

Improve Article

How to keep gap between columns using Bootstrap?

  • Last Updated : 30 Nov, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :