<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="container"> <div class="row g-3 mt-5 mb-5"> <div class="col-md-3 d-flex align-items-stretch"> <div class="card"> <div class="card-img-top image-card image-card-1"> <img src="https://i.imgur.com/CHquE7o.png" alt="..."> </div> <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span> <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a> <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div> </div> </div> </div> <div class="col-md-3 d-flex align-items-stretch"> <div class="card"> <div class="card-img-top image-card image-card-2"> <img src="https://i.imgur.com/2TNPTfA.png" alt="..."> </div> <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span> <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a> <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div> </div> </div> </div> <div class="col-md-3 d-flex align-items-stretch"> <div class="card"> <div class="card-img-top image-card image-card-3"> <img src="https://i.imgur.com/pTkFtZq.png" alt="..."> </div> <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span> <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a> <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div> </div> </div> </div> <div class="col-md-3 d-flex align-items-stretch"> <div class="card"> <div class="card-img-top image-card image-card-1"> <img src="https://i.imgur.com/CHquE7o.png" alt="..."> </div> <div class="card-body"> <span class="text-uppercase text-danger fw-bold fs-6">Category</span> <h6 class="card-title text-dark mt-2">What you wants to know about hubspot?</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing eliLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p> <a href="#" class="text-dark">Read full story...</a> <div class="mt-4 about d-flex justify-content-between align-items-center"> <span>By Prabhjot Singh</span> <span>On 12 Oct, 2020</span> <span>5 min read</span> </div> </div> </div> </div> </div> </div>

body { background: #000 } .card { border-radius: 20px; overflow: hidden; border: none; background-color: #fff } .image-card { height: 200px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden } .image-card-1 { background-color: #18A4F7 } .image-card-2 { background-color: #00D7D2 } .image-card-3 { background-color: #FF75A0 } .image-card img { height: 150px; width: 150px; object-fit: cover } .card-text { font-size: 13px } .card-body a { font-size: 12px } .about span { font-size: 12px }