Using Bootstrap, how do I create 2 columns for content? - example included

Question

I am new to using Bootstrap and want to create a responsive layout that has 2 columns side by side for my posts. Example

I want to achieve the 2 column arrangement seen under Portfolio. I have looked at the source and see various classes that don't seem to be included in the standard Bootstrap. I am using the Bootstrap version included with an MVC6 project in VS2013. Any help or a nudge in the right direction is appreciated.

My attempt to date causes this to occur. I end up with the gap.

Here my MVC code that causes the gaps to occur:

    <div class="container">    
    @For Each item In Model.ToList         
            @<div class="col-md-6">
                <div class="item">
                    <div class="content">
                        @Html.Raw(GetImageHelper.getImage(True, item.PostSummary))
                        <h3>
                            @item.PostTitle
                        </h3>
                        @Html.Raw(item.PostSummary.StripStyle)    
                    </div>
                </div>    
            </div>    
       Next
</div>

Thank you

See my answer here: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows/24571644#24571644. — jme11, Jul 08 '14 at 18:14

score 1 · Answer 1 · answered Jul 08 '14 at 18:03

1

It looks like you didn't use clearing properly. My solution for that issue is to use bootstrap row class. Following example also supports responsiveness:

<div class="row">
    <div class="col-md-6 col-xs-12"></div>
    <div class="col-md-6 col-xs-12"></div>
</div>
<div class="row">
    <div class="col-md-6 col-xs-12"></div>
    <div class="col-md-6 col-xs-12"></div>
</div>
...

answered Jul 08 '14 at 18:03

luke

3,531
1
26
46

2

FYI, col-xs-12 is redundant, as col-xs is always 12 unless you specify otherwise. Just put col-md-6 and you'll get exactly the same result. Less typing and easier to read:) – Shawn Taylor Jul 09 '14 at 01:40

score 0 · Answer 2 · answered Jul 08 '14 at 18:38

This is an unequal height problem. Float tries to fill the available area as much as possible, but when you have one column that's taller than another, it knocks the next float object off to the right a little. While @luke is right that you can clear each row to solve the problem, that also kills your site's responsiveness, as now you can only have two or less per row. For this particular example, that may not be a problem. You've got an initially even number of columns and for very small screens you can just scale down to one per row. In other situations, though, such as wanting to have three per row perhaps in nice wide-screen displays, you'd be out of luck.

You might want to take a look at the article, Bootstrap 3 Responsive Columns of Same Height, on Minimit.

Actually, to solve this with more responsiveness than the OP needs, there is a simpler solution that requires no custom CSS... combining hidden-md + clearfix classes means you clear the floats only at md threshold, and then hidden-lg + clearfix clears the floats only at lg threshold. Alternate those combos every 2 or 3 cols, and you've got responsive float clearing. Bootstrap docs explain it better than me here: http://getbootstrap.com/css/#grid-responsive-resets — Shawn Taylor, Jul 09 '14 at 02:05

Using Bootstrap, how do I create 2 columns for content? - example included

2 Answers2