How to keep gap between columns using Bootstrap?
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.
Image without offset:
Image with offset:
Vote for difficulty
Article Tags :
Report Issue
Please Login to comment...