Bootstrap layout, a suggestion

Question

I have to organize a quite common (I suppose) layout for my web app (AngularJS + Bootstrap).
The (responsive) layout is made up by a table of rows; this way, more or less:

------------------------------------------------ row 1 ---
| pho- | description                                     |
|  to  | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------
 ...
------------------------------------------------ row N ---
| pho- | description                                     |
|  to  | button1 button2 button3 button4 button5 button6 |
----------------------------------------------------------

This is the markup I've come up with:

<div class="container">
  <div class="row" ng-repeat="(id, person) in persons">
    <div class="col-xs-4 col-sm-3 col-md-2 col-lg-2">
      <img ng-src="{{person.photo_src}}" />
    </div>
    <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div>
              {{person.description}}
          </div>
        </div>
      </div>
      <div class="row-fluid">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button1
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button2
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button3
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button4
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button5
          </button>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <button type="button" class="btn">
            button6
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

I'm not satisfied with the results, as you can see... :-(

@1200px width:

@360px width:

(the last button can be present or not...).

I would like to split the buttons on two different rows, at widths below 640 (for example), but I can't figure out how to get there... I've never fully grasped Bootstrap's layout logic... :-(

Any graphical/layout improvement suggestion would be kindly accepted, too... :-)

Answer 1

Here's a grid layout that might work for you..

<div class="container">
    <div class="row" ng-repeat="(id, person) in persons">
        <div class="col-xs-12 col-sm-3 col-md-2">
            <img src="http://placehold.it/100" class="img-responsive">
        </div>
        <div class="col-xs-12 col-sm-9 col-md-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div>
                        person.description
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="clearfix visible-sm visible-xs">&nbsp;</div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <button type="button" class="btn">
                        button
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Demo: http://codeply.com/go/XWGksepx3h

Also note, there is no row-fluid in Bootstrap 3, and you only need to specify class for the smallest viewport you want to support. Therefore the col-lg-* aren't needed since col-md-* will be used for col-md-* and col-ld-*.

Answer 2

You may try to add this line to your css's:

@media (max-width: 640px) {
.col-sm-2 {
    width:33.33333333333331%;
}
}

FIDDLE

Answer 3

I think you should use the 12 column concept of bootstrap. You should divide the column in that way, where the row is divided in 12 column.

For smaller screens you can use the col-xs I hope to solve the responsive problem above mentioned by you can be solved by the given code.

<div class="container">
    <div class="row" ng-repeat="(id, person) in persons">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            <img ng-src="{{person.photo_src}}" />
        </div>
        <div class="col-xs-8 col-sm-9 col-md-9 col-lg-9">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div>
                        {{person.description}}
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button1
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button2
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button3
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button4
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button5
                    </button>
                </div>
                <div class="col-xs-4 col-sm-2 col-md-2 col-lg-2">
                    <button type="button" class="btn">
                        button6
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>