-2

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

  1. twitter bootstrap grid system. Spacing between columns
  2. How do I add a margin between bootstrap columns without wrapping
  3. 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.

Community
  • 1
  • 1
Stanislav Balev
  • 65
  • 1
  • 9

4 Answers4

1

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:

.inner-wrapper {
  padding: 0 25px; /* padding on both sides */
  padding: 25px 0; /* padding for top and bottom */
  padding: 25px; /* padding all along */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-4">
     <div class="inner-wrapper">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="inner-wrapper">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="inner-wrapper">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum ligula sit amet nibh placerat, nec malesuada nisi venenatis. Nullam sit amet ante sollicitudin, ullamcorper ante nec, posuere dolor. Nulla sodales porta orci, nec gravida ipsum volutpat vel. In hac habitasse platea dictumst. Maecenas maximus erat in laoreet tempus. Nunc quis vehicula tortor, et ornare velit. Ut sapien augue, cursus ut finibus ut, porta volutpat elit. Nunc auctor enim eu neque sodales ultricies quis ac ex. Mauris a placerat velit. Sed sagittis bibendum est, a malesuada libero scelerisque id. Curabitur rhoncus leo ac massa consectetur, sit amet bibendum mi maximus. Cras porttitor sodales neque, at sodales leo gravida eu. Etiam dui erat, pretium at euismod eget, blandit sit amet risus. Vivamus mollis, magna euismod luctus posuere, purus tellus venenatis arcu, sed eleifend ante massa eu massa. Integer tempor bibendum vulputate. Donec ut tellus vehicula, vestibulum quam vitae, pretium mi.</p>
    </div>
  </div>
  
</div>
zsawaf
  • 1,921
  • 16
  • 24
0

Try set "margin-bottom"

.product-header
{
background-image:url("http://placehold.it/350x102");
background-size:cover;
border-bottom: 2px solid #94e059;
min-height: 102px;
margin-bottom: 20px;
}
grinmax
  • 1,835
  • 1
  • 10
  • 13
0

If you're using BootStrap 3.3.7, you can use the open source library bootstrap-spacer via NPM

npm install bootstrap-spacer

or you can visit the github page:

https://github.com/chigozieorunta/bootstrap-spacer

Here's an example of how this works to space rows using the .row-spacer class:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

If you'd require spaces between columns, you can also add the .row-col-spacer class: 

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

And you can also combine various the .row-spacer & .row-col-spacer classes together:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>
Chigozie Orunta
  • 448
  • 3
  • 13
-1

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 or white space between two or more column then your content will go inside the column grid. Don't write border, background-color with column. Create inside another div then write border background etc.

.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group">
            <div class="product-tiles">
              <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="product-header">
                      <img src="http://placehold.it/128x128" class="img-responsive product-icon" width="128" height="128" alt="">
                    </div>
                  </div>
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="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>
              
           </div>
    </div>
 </div>

Hope this will help.

Rahul
  • 2,011
  • 3
  • 18
  • 31