Ivan Ivan - 4 months ago 11
HTML Question

How can I make layout like this in bootstrap?

I have three column 5-5-2 and it should be same height but middle column has two rows,first row is a single column, and second row has two column



<div class="container">
<div class="row equal">
<div class="col-xs-12 col-sm-5">
<figure>
<img class="img-responsive" src="http://placehold.it/300x300" alt="">
</figure>
</div>
<div class="col-xs-12 col-sm-5">
<div class="row">
<div class=" col-sm-12">
<figure>
<img class="img-responsive" src="http://placehold.it/300x150" alt="">
</figure>
</div>
</div>
<div class="row">
<div class=" col-sm-6">
<figure>
<img class="img-responsive" src="http://placehold.it/300x300" alt="">
</figure>
</div>
<div class="col-sm-6">
<figure>
<img class="img-responsive" src="http://placehold.it/300x300" alt="">
</figure>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-2">
<figure>
<img class="img-responsive" src="http://placehold.it/300x600" alt="">
</figure>
</div>
</div>
</div>




Answer

Use bootstrap and set the img size. Here is code:

 <figure class="figure">
      <img src="..." width="200px" height="200px" class="figure-img img-fluid img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
      <figcaption class="figure-caption">A caption for the above image.</figcaption>
    </figure> 
Comments