<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="store"> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div><div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> <div class="store-listing"> <div class="feature"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="store-info"> <div class="logo"> <img src="https://th-test-11.slatic.net/p/4d37e2dd80cbd8800b0e0c0b59823f10.jpg_200x200Q100.jpg_.webp" width="100%"/> </div> <div class="title"> <div class="text"> BIG Store </div> <div class="detail"> <small>BIG Store</small> </div> </div> </div> </div> </div>

body{ background:ghostwhite; } .store{ width:1024px; margin:auto; padding:0; display:flex; flex-wrap:wrap; } .store-listing{ display:flex; flex-direction:column; width: calc(100% / 5 - 20px); margin:10px; background:white; } .feature{ width:100%; height:170px; } img{ width:100%; height:100%; object-fit:cover; } .store-info{ display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 30px 5px; } .logo { position: absolute; width: 65px; height: 65px; top: -49px; border-radius: 50px; overflow: hidden; border: 5px solid white; }