CODEWITHSUNDEEP
angularjstwitter-bootstrap
membersound
membersound

Reputation: 86855

How to align long text content in a two column grid with bootstrap?

A have a json array with several elements. The content is served as fulltext with variable length.

I want to align those elements in a grid with two columns. But how?

<div class="row">
    <div class="col-sm-6" ng-repeat="text in texts">
        <div>{{text}}</div>
    </div>
</div>

Result: the layout is almost fine, but it shows eg the following structure:

-------------
 AA   |  BB
      |  BBBB
-------------
 CC   |  DD
 CCCC |------
 CC   |  EE
      |  EEEE
      |  EE

Here the last element "E" should be placed below "C" not below "D". But it's not. Why? Is my grid definition wrong?

Upvotes: 0

Views: 52

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

The problem occurs because Bootstrap uses float:left therefore shorter columns are pulled to the right of taller columns.

There are 2 ways to fix this...

1) Clearfix "reset" DIV every 12 col-* units. In your case after every 2 col-sm-6. This is the documented approach. http://codeply.com/go/uKVYeBvsMF

OR

2) CSS n-th child approach. Use CSS to clear the columns: http://codeply.com/go/GQ5fnkSqKl

 .row > .col-sm-6:nth-child(2n+1) {
        clear: left;
 }

Upvotes: 2

Related Questions