Twitter Bootstrap - Margins between columns and equal heights

Question

I am creating a simple layout using Twitter Bootstrap 3. Here is what I have so far

<div class="container">
    <div class="row">
        <div class="col-xs-3 red">
            <h3>Column 1 Content</h3>
            <img class="img-responsive" src="http://dummyimage.com/300x400/000/fff">
        </div>
        <div class="col-xs-3 blue">
            <h3>Column 2 Content</h3>
                        <img class="img-responsive" src="http://dummyimage.com/300x600/000/fff">
        </div>
        <div class="col-xs-3 green">
            <h3>Column 3 Content</h3>
                        <img class="img-responsive" src="http://dummyimage.com/300x100/000/fff">
        </div>
        <div class="col-xs-3 yellow">
            <h3>Column 4 Content</h3>
            <p>This is some dummy content</p>
        </div>
    </div>
</div>

http://jsfiddle.net/5L8w6zr0/

What I am trying to do now is the following...

Each column should be the same height
There should be a space in between each column

I have tried to achieve the space by adding a margin to each column but that just pushes things onto the next row.

Can anyone suggest a solution?

possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — cvrebert, Oct 02 '14 at 20:43

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

Bootstrap uses padding inside of the column elements rather than margins, so you'd want to wrap a div around the contents and move the color classes to that inner div.

See this answer for the height issue: How can I make Bootstrap columns all the same height?

edited May 23 '17 at 11:58

Community

1
1

answered Oct 02 '14 at 15:44

Dax Hansen

31
1

score 2 · Answer 2 · answered Oct 02 '14 at 15:46

2

What you need is a table like layout, because your columns need to be of same height, so I would suggest using display:table for container, display: table-row for .row and display: table-cell for your cols.

If your layout needs s to break after certain point then for small screens you rewrite the display properties using media queries

Here's an update fiddle

answered Oct 02 '14 at 15:46

Caelea

2,318
15
22

Thanks, that works. Seems strange that there is no functionality built into bootstrap for this – fightstarr20 Oct 02 '14 at 15:55
@fightstarr20 Because it's not really compatible with the rest of the current float-based grid system. – cvrebert Oct 02 '14 at 20:42

Twitter Bootstrap - Margins between columns and equal heights

2 Answers2