D
D
dk-web2015-07-23 22:12:48
Bootstrap
dk-web, 2015-07-23 22:12:48

How to align col-md-2 to row in Bootstrap 3?

Good day!
It seems to have known bootstrap - but there was a question about the grid.

<div class="jumbotron">
    <div class="container-fluid">
      <div class="row">
                     <div class="col-md-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
                   <div class="col-md-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
           </div>
        </div>        
    </div>

The code has been reduced, boxes, let's say 4.
How to "underfill" the row, aligning this whole thing in the center? I know about the offset class, but, in theory, it is applicable if you have one div in a row ... but what if there are several? Of course, you can make a hidden box on the left and on the right, but it's stupid ...
The ultimate task is to use several "boxes" of small width in a row, without stretching them to the full length of the row.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
dk-web, 2015-07-23
@dk-web

Actually, everything was decided very simply ... I
added the container-narrow class with a width of 60% to the container class
and set col-md-3

C
CapeRatel, 2015-07-23
@CapeRatel

<div class="jumbotron">
    <div class="container-fluid">
      <div class="row">
                     <div class="col-md-2 col-md-offset-2">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
                   <div class="col-md-2 col-md-offset-4">
                        <div class="mybox">
                            <img src="img/empty_photo.png" class="img-responsive center-block">
                            <p> Фио, должность </p>
                        </div>
                </div>
           </div>
        </div>        
    </div>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question