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:
<!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: