"5 content in a row using flex"
Bootstrap 3.0.0 Snippet by akhtarvahid

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div> <div class="products"> <div class ="product p1"> <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_1"/> <p>some text</p> <div class="collapse"> do you want to say something!! please share your thought </div> </div> <div class ="product p2"> <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_2"/> <p>some text</p> <div class="collapse"> do you want to say something!! please share your thought </div> </div> <div class ="product p3"> <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_3"/> <p>some text</p> <div class="collapse"> do you want to say something!! please share your thought </div> </div> <div class ="product p4"> <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_4"/> <p>some text</p> <div class="collapse"> do you want to say something!! please share your thought </div> </div> <div class ="product p5"> <img src="https://www.waverlyhematologyoncology.com/sites/default/files/uploads/twitter-512.png" alter="product_5"/> <p>some text</p> <div class="collapse"> do you want to say something!! please share your thought </div> </div> </div> </div>
div{ display: flex; flex-direction: column; } div .products{ display: flex; flex-direction: row; text-align: center; flex-wrap: wrap; height: 400px; justify-content: space-around; } div .products .product{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 200px; height: 300px; } div .products .product img{ height: 150px; width: 150px; border-radius:50%; } div .products .product p{ font-size: 1em; } div .products .product .collapse{ display: none; } div .products .product:hover img{ height: 180px; width: 180px; border-radius:50%; } div .products .product:hover .collapse{ display: block; font-size:1em; } @media screen and (max-width:1020px) { div .products{ height: 400px; margin-bottom: 50px; } div .products .product{ width: 250px; height: 250px; } div .products .product img{ height: 140px; width: 140px; border-radius:50%; } div .products .product p{ font-size: 18px; } div .products .product:hover img{ height: 150px; width: 150px; } div .products .product:hover .collapse{ font-size:18px; } } @media screen and (max-width:895px) { div .products{ height: 380px; margin-bottom: 90px; } div .products .product{ width: 240px; height: 240px; } div .products .product img{ height: 130px; width: 130px; border-radius:50%; } div .products .product p{ font-size: 18px; } div .products .product:hover img{ height: 150px; width: 150px; } div .products .product:hover .collapse{ font-size:18px; } } @media screen and (max-width:672px) { div .products{ height: 340px; margin-top: 20px; margin-bottom: 300px; } div .products .product{ width: 220px; height: 220px; } div .products .product img{ height: 90px; width: 90px; } div .products .product p{ font-size: 15px; } div .products .product:hover img{ height: 95px; width: 95px; } div .products .product:hover .collapse{ font-size:15px; } } @media screen and (max-width:480px) { div .products{ height: 340px; margin-top: 20px; margin-bottom: 300px; } div .products .product{ width: 220px; height: 220px; } div .products .product img{ height: 90px; width: 90px; } div .products .product p{ font-size: 15px; } div .products .product:hover img{ height: 95px; width: 95px; } div .products .product:hover .collapse{ font-size:15px; } }

Related: See More


Questions / Comments: