I wanna to add space between columns on bootstrap grid.
Here is my html and css I use stock bootstrap v3.3.4
I try to use those topics:-
- twitter bootstrap grid system. Spacing between columns
- How do I add a margin between bootstrap columns without wrapping
- Bootstrap: add margin/padding space between columns
.product-icon {
min-height: 30px;
position: relative;
top: 65px;
z-index: 999;
margin:0 auto;
}
.product-header
{
background-image:url("http://placehold.it/350x102");
background-size:cover;
border-bottom: 2px solid #94e059;
min-height: 102px;
}
.product-information
{
text-align:center;
}
.product-tiles
{
border: 2px solid #94e059;
}
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/softwaredev-icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="custom-software-development.html">Read more »</a></p>
<p><a class="btn btn-default" href="custom-software-development.html">Make inquiry »</a></p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 product-tiles form-group">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-header">
<img src="images/icon.png" class="img-responsive product-icon" width="128" height="128" alt="">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 product-information">
<br><br><br><h3>Lorem ipsum dolor sit amet</h3><hr>
<p> <i class="icon-desktop "></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt impedit est voluptatem doloremque architecto corporis suscipit quidem ratione! Quis laborum nam optio dolorem doloremque ex nobis quibusdam ad quo dolores? </p><br>
<p><a class="btn btn-default" href="csd.html">Read more »</a></p>
<p><a class="btn btn-default" href="csd.html">Make inquiry »</a></p>
</div>
</div>
</div>
</div>
I don’t want to use offset on columns.
4
Answers
Check this code. How it work? Also read bootstrap documentation. It’s bootstrap 3.3.7 Documentation. Look Bootstrap have margin less grid system. If you want to
margin
orwhite space
between two or morecolumn
then your content will go inside thecolumn grid
. Don’t writeborder
,background-color
with column. Create inside anotherdiv
then writeborder
background
etc.Hope this will help.
Try set “margin-bottom”
Why don’t you add an inner wrapper inside your bootstrap column and add padding to it? I’m not sure if this is what you’re asking, but here’s a demonstration:
If you’re using BootStrap 3.3.7, you can use the open source library bootstrap-spacer via NPM
or you can visit the github page:
Here’s an example of how this works to space rows using the .row-spacer class:
If you’d require spaces between columns, you can also add the .row-col-spacer class:
And you can also combine various the .row-spacer & .row-col-spacer classes together: