Menu
The columns are responsive, so the width changes on different screen sizes. The images are all different sizes and aspect ratios. I can't use the .thumbnail class inherent in bootstrap as it has a lot of styling options I don't want.
738
Basic Structure of a Bootstrap Grid So, to create the layout you want, create a container ( <div class="container"> ). Next, create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Bootstrap includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.
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 as possible into the squares. It will possibly omit some of an image if its got an aspect ratio a long way from 1:1, but is probably your best bet.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
