7

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!

Quiver
  • 1,351
  • 6
  • 33
  • 56
  • There should be spaces between `col-**-n` items. `col-**-n` class has default sets of `padding-left` and `padding-right` and the amount is fixed by `15px`. May I see your own css? – hina10531 May 12 '15 at 00:17
  • 1
    Possible duplicate of [twitter bootstrap grid system. Spacing between columns](https://stackoverflow.com/questions/18738712/twitter-bootstrap-grid-system-spacing-between-columns) – chharvey Apr 19 '18 at 13:55

7 Answers7

6

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

Shadi Alnamrouti
  • 11,796
  • 4
  • 56
  • 54
  • 1
    But you can see it's not working how I want it to by this code: http://www.bootply.com/uTaX6ASnHj My columns have different background colors so the column itself is "visible". So in the above example I would like to see white space between the columns. – Quiver May 12 '15 at 00:28
  • 2
    @Quiver you should set the background style to the

    which is inside the column, not the column it self. `

    ...

    `     – Shadi Alnamrouti May 12 '15 at 00:44
  • That was it! A rookie mistake. Thanks for your help! – Quiver May 12 '15 at 01:00
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
Metal3d
  • 2,905
  • 1
  • 23
  • 29
1

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

plushyObject
  • 1,123
  • 6
  • 14
1

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 might add a content to wrap it, otherwise you'll have those rules applied to all columns in your layout!

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

So then 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 create just a class like: spaced-col and then add a padding on it:

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

and then you apply this class on 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>

So you'll have your spacing as you want :)

Cheers

dpedoneze
  • 949
  • 7
  • 17
1

If you use padding and change the background color, you may notice that the colors of the columns don't have much spacing between them. Perhaps a better option would be

    .col-md-4 {
        margin-left: 5px;
    }
Imran Niloy
  • 31
  • 13
0

You have the option to use column offsetting col-md-offset-*. You wouldn't be able to maintain the spacing of your columns (reduce 4 to 3), but I believe it should somewhat do the job for responsive spacing.

Check this out: twitter bootstrap grid system. Spacing between columns

Community
  • 1
  • 1
OscillatingMonkey
  • 385
  • 2
  • 10
  • Wouldn't this cause the columns to be off-center though? If you know of a way to center them while including offsets then let me know! I'm still new to all of this! – Quiver May 12 '15 at 00:29
  • It most definitely would. You would essentially be required to add the offset to each side in order to receive your desired effect. Seeing as your question refers to far less of an effect than the offset is necessary for I would say shadi1024's answer suits you just fine. – OscillatingMonkey May 12 '15 at 01:29
0

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

<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 it working here: https://codepen.io/pmfeo/pen/RVxPXg

That div will adjust to it's parent padding.

Pablo
  • 1,875
  • 1
  • 10
  • 11