[Solved] Bootstrap Grid System – Separating Columns

[TheN00b]

Hello

I am working with Bootstrap 3, and have come across a problem. Again I know my own way of achieving what I want, but I thought maybe there is a cleaner way that is already provided to me by Bootstrap, I looked at the Bootstrap Docs and could not see what I wanted, so I thought let me ask the Professionals over at CSS-Tricks :)

Here is the bottom section of the website I am working on. It is split into three by md-col-4 and all is good so far. BUT I want some space between each square, I want it to be the width of the default padding that is applied to the Bootstrap Grid.

My markup (standard Bootstrap markup) for that section is as follows:

<div>
    <!-- Example row of columns -->
    <div>
        <div>
            <h2>Heading</h2>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
            <a href="#">View details &raquo;</a>
        </div>
        <div>
            <h2>Heading</h2>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
            <a href="#">View details &raquo;</a>
        </div>
        <div>
            <h2>Heading</h2>
            Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
            <a href="#">View details &raquo;</a>
        </div>
    </div>
</div>

Knowing the above, are you aware of any way that Bootstrap allows for what I am after? If not, what is the cleanest way of acheiving the spacing between the three columns?

Any help would be greatly appreciated.

Thank You.

PS. I know that the column widths would have to shrink a bit if spacing is added, I’m OK with that.

[Paulie_D]

Doesn’t bootstrap allow you to set your own gutters?

I thought that was in one of the settings you could apply when downloading?

[Paulie_D]

Hmmm…I see.

The issue is that TB uses padding for gutters and you have different bg colors for each section.

Don’t know if this will help

http://stackoverflow.com/questions/18071055/bootstrap-3-missing-gutters

[TheN00b]

Thanks Paulie, that did it for me. You may mark this as Solved too ^_^

[html5beginners]

found it in jsfiddle : http://jsfiddle.net/PFxUk/

This may help.

[Author]

Posts