According to my psd template, i have CONTAINER which consists of 5 equal width (344px) columns. I decided to go with bootstrap in terms of responsiveness. But now i'm frustrated with this task.
Is there any way to implement this or i need:
Codepen: http://codepen.io/anon/pen/YZbBQG
<div class="cont">
<div class="bicycles">
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
<div class="bik"><img src="https://pp.userapi.com/c637925/v637925758/4d271/da6RN5KLBRU.jpg" alt=""></div>
</div>
</div>
I'd recommend using the auto layout col-lg columns for larger widths so that you can have 5 across, then scale down to the standard size grid columns on md, sm, etc..
Bootstrap 4.6 (update 2020)
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="w-100 d-none d-lg-block">
<!--force wrap every 5 on lg-->
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
<div class="col-md-3 col-sm-4 col-lg">
...
</div>
</div>
</div>
Note: This will allow the columns to grow evenly to fill the width of the row. In rare cases where the column content forces the width (for example columns that contain fixed width images or non-wrapping text), use min-width:0 to force equal column width regardless of their content.
.col-lg {
min-width: 0;
}