How to save space between three columns in Bootstrap?

Question

I have searched quite a bit here at Stackoverflow for how to solve this problem effectively, but I still haven't found exactly what I'm looking for.

Basically, I have three columns that I want to evenly distribute in the center and center. However, when I set col-md-4 for all three columns, the end result is all three are grouped together. How can I make space between columns? Like 10-15px or so without forcing them to another line.

Here is a sample 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 can’t figure out how to do it. I have seen several people suggest just putting them in another div with some addition, but this does not seem to work for me.

Thanks for any help! I am open to all suggestions!

Answer 1

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

Your code works fine, here: http://www.bootply.com/H6DQGdZxGy

Answer 2

This is a late answer, but I think that some people may be interpreted by another explanation. The Bootstrap "cols" system is not intended for decoration, but for placing elements on pages. If you need to place the contents of a column, 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> 

You can then add the spacing to ".col-spaced" with the add-on.

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

Note that:

• Fields
• will resize your column size because col- * must be placed to view the column layout
• you may need to change col- * first and last children to fix some problems.

Answer 3

You have the option to use col-md-offset- * column offset. You won’t be able to maintain the intervals between your columns (reduce the number from 4 to 3), but I believe that it should do a bit of the job for the response interval.

Check it out: twitter bootstrap grid system. Column Spacing

Answer 4

The “hacker” way to do what you want is to give the columns a border that will be the same color as the background.

Answer 5

You can do something like:

 [class*="col-"] { padding-right: 15px; padding-left: 15px; } [class*="col-"]:first-child { padding-left: 0px; } [class*="col-"]:last-child { padding-right: 0px; } 

You can add content to transfer it, otherwise you will apply these rules to all columns in your layout.

 .spaced-columns [class*="col-"] { padding-right: 15px; padding-left: 15px; } 

So you can use:

 <div class="spaced-columns"> <div class="col-md-4"> your content here</div> <div class="col-md-4"> your content here</div> <div class="col-md-4"> your content here</div> </div> 

or you can only create a class, for example: spaced-col , and then indent it:

 .spaced-col { padding: 0px 10px; } 

and then you apply this class to your cols

 <div class="col-md-4 spaced-col"> your content here</div> <div class="col-md-4 spaced-col"> your content here</div> <div class="col-md-4 spaced-col"> your content here</div> 

This way you will have the distance you want :)

Greetings

Answer 6

If you use registration and change the background color, you may notice that the colors of the columns do not have a large distance between them. Perhaps the best option would be

  .col-md-4 { margin-left: 5px; } 

Answer 7

You can put another div to place your content inside a .col div, as shown below:

 <div class="container"> <div class="row"> <div class="col-md-4"> <div class="content-wrapper" style="border:1px solid #000;"> <p>Some content here</p> </div> </div> <div class="col-md-4"> <div class="content-wrapper" style="border:1px solid #000;"> <p>Some content here</p> </div> </div> <div class="col-md-4"> <div class="content-wrapper" style="border:1px solid #000;"> <p>Some content here</p> </div> </div> </div> </div> 

See how it works here: https://codepen.io/pmfeo/pen/RVxPXg

This div will adjust the parent addition.