Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Bootstrap Grid System – Separating Columns

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #169986
    TheN00b
    Participant

    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.

    #169992
    Paulie_D
    Member

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

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

    #169993
    Paulie_D
    Member

    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

    #170010
    TheN00b
    Participant

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

    #197090
    html5beginners
    Participant

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

    This may help.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.