How to keep space between three columns in Bootstrap?

Question

I've done quite a bit of searching here on Stackoverflow on how to solve this problem efficiently, but I still haven't seemed to find exactly what I'm looking for.

Basically, I have three columns that I want evenly spaced and centered across my page. However, when I set col-md-4 for all three columns, the end result is they are all three bunched up to each other. How can I make it so that there is space between the columns? Like 10-15px or so without forcing them onto another row.

Here is some example code:

<div class="row-fluid">
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
     <div class="col-md-4">
          <p>Stuff that fills this column</p>
     </div>
</div>

Maybe I'm just doing something wrong but I cannot seem to figure out how to make this work. I've seen several people suggest to just put them into another div with some padding but that doesn't seem to work for me.

Thanks for any help! I'm open to all suggestions!

Answer 1

Actually, your code already creates spaces between columns, because in bootstrap the column has 15px padding from each side.

Your code is working normally, check here: http://www.bootply.com/H6DQGdZxGy

Answer 2

It's a late answer but I guess that some people can be interessed by another explanation. Bootstrap "cols" system is not made to decorate but to place elements in pages. If you need to space column contents, you need to wrap your content:

<div class="row-fluid">
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
   <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>
 </div>
 <div class="col-md-4">
    <div class="col-spaced">
      <p>Stuff that fills this column</p>
   </div>     
</div>

Then you can add spacing on ".col-spaced" by using padding

.col-spaced {
     margin-left: 15px
}

Note that:

• margin will change you column size because the col-* should be placed to respect column layout
• you may need to change col-* first and last child to fix some problem

Answer 3

A 'hacky' way to do what you want is to give the columns a border that is the same color as the background.