Bootstrap Image Grid (Responsive)
Bootstrap Image Grid (Responsive)
xxxxxxxxxx<!--You Can See Online Here :https://codepen.io/sibche2013/pen/WNXWjyB --><!DOCTYPE html><html><style>* { box-sizing: border-box;}body { margin: 0; font-family: Arial;}.header { text-align: center; padding: 32px;}.row { display: -ms-flexbox; /* IE10 */ display: flex; -ms-flex-wrap: wrap; /* IE10 */ flex-wrap: wrap; padding: 0 4px;}/* Create four equal columns that sits next to each other */.column { -ms-flex: 25%; /* IE10 */ flex: 25%; max-width: 25%; padding: 0 4px;}.column img { margin-top: 8px; vertical-align: middle; width: 100%;}/* Responsive layout - makes a two column-layout instead of four columns */@media screen and (max-width: 800px) { .column { -ms-flex: 50%; flex: 50%; max-width: 50%; }}/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */@media screen and (max-width: 600px) { .column { -ms-flex: 100%; flex: 100%; max-width: 100%; }}</style><body><!-- Header --><div class="header"> <h1>Bootstrap Responsive Image Grid</h1> <p>Resize the browser window to see the responsive effect.</p></div><div class="row"> <div class="column"> <img src="https://i.ibb.co/9N66jGM/1.jpg"> <img src="https://i.ibb.co/kSRxQC2/2.jpg"> <img src="https://i.ibb.co/8r1GyHz/3.jpg"> </div> <div class="column"> <img src="https://i.ibb.co/WWt4vMv/4.jpg"> <img src="https://i.ibb.co/hdYj3mF/5.jpg"> <img src="https://i.ibb.co/NZWR2CW/6.jpg"> </div> <div class="column"> <img src="https://i.ibb.co/wzpJ8vc/7.jpg"> <img src="https://i.ibb.co/yVGFPPw/8.jpg"> <img src="https://i.ibb.co/wzpJ8vc/7.jpg"> </div> <div class="column"> <img src="https://i.ibb.co/kSRxQC2/2.jpg"> <img src="https://i.ibb.co/1s2NR9J/11.jpg"> <img src="https://i.ibb.co/8r1GyHz/3.jpg"> </div></div> </body></html>Source: Grepper
Closely Related Answers
xxxxxxxxxx<img src="..." class="img-fluid" style="max-width: 100%; height: auto;">Source: getbootstrap.com
Twitter 
LinkedIn