Clever Geek Handbook

How do I create a two column grid with perfectly square images in bootstrap?

The columns are responsive, so the width changes across different screen sizes. Images come in different sizes and proportions. I can't use the bootstrap-specific .thumbnail class as it has a lot of styling options that I don't want.

+3


source to share


2 answers


Html

<div class="row">
    <div class="col-xs-6">
         <div class="square"></div>
    </div>

    <div class="col-xs-6">
        <div class="square"></div>
    </div>
</div>

CSS



.square {
    width: 100%;
    padding-bottom: 100%;
    background-image: url('your_img');
    background-size: cover;
}

This will try to fit as much of the image into the squares as possible. It will possibly omit part of the image if it gets an aspect ratio far from 1: 1, but probably best.

+10


source


This is how you would do just 2 columns

<div class="row show-grid">
      <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
      <div class="col-md-6"><img src="" alt="" width="100%" height="auto"></div>
    </div>


Hope it helps.

More on grids here: http://getbootstrap.com/css/#grid

-2


source






More articles:


All Articles