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= "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> Output: This output may not match with the given output image because the screen size of the output is smaller. Image without offset: Image with offset: Last Updated : 04 Apr, 2023 Like Article Save Article Previous Explain Affix plugin in Bootstrap Next How to underline all words of a text using jQuery ? Share your thoughts in the comments Add Your Comment Please Login to comment... Similar Reads How to set length to set the gap between the columns in CSS ? How to Specify Divider gap in Square Grid using Bootstrap ? Bootstrap 5 Spacing Gap Bootstrap 5 Columns Offsetting Columns How to Set the Gap Between Text and Underlining using CSS ? How to Bridge the Gap Between Web Designing and Development? What is the purpose of using the Gap Classes in Tailwind CSS ? CSS column-gap Property CSS grid-row-gap Property CSS grid-column-gap Property Like somsagar2019 Follow Article Tags : Bootstrap-Questions Bootstrap Web Technologies