How to keep gap between columns using Bootstrap?

Last Updated : 04 Apr, 2023

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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
              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> 