<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="blog py-5 bg-dark"> <div class="container"> <div class="row"> <div class="col-12 "> <h3 class="heading-6 text-center text-white">Latest Blogs</h3> <hr class="mx-auto"> </div> <div class="col-sm-3"> <div class="card"> <img src="http://7englishielts.com/img/projects/5.jpg" class="w-100"> <div class="card-block"> <div class="category">Blog</div> <a href="#"><h3 class="card-title">Upcoming Facebook Ad Format Update. Hear it first from us</h3></a> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <img src="http://7englishielts.com/img/projects/2.jpg" class="w-100"> <!-- <div class="card-img-top" alt="Card image cap"></div>--> <div class="card-block"> <div class="category">Blog</div> <a href="#"><h3 class="card-title">Organic and Paid advertisements. Which is better ?</h3></a> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <img src="http://accudata.co.in/blog3.jpg" class="w-100"> <!-- <div class="card-img-top" alt="Card image cap"></div>--> <div class="card-block"> <div class="category">Blog</div> <a href="#"><h3 class="card-title">Top 3 UI/UX Website Design Trends in 2019</h3></a> </div> </div> </div> </div> </div> </section>

body { font-family: 'Montserrat', sans-serif; background: #eeeeee; /* background: #fff; */ font-size: 14px; line-height: 1.42857143; } .bg-dark { background-color: #040b18 !important; } .blog .card { border-radius: 0; border: 0; background: rgba(255,255,255,0.06); transition: background 0.25s; cursor: pointer; } .blog .card:hover { background: rgba(255,255,255,0.1); transition: background 0.25s; } .blog .card .card-block { padding: 1.1rem; min-height: 160px; } .blog .card .card-block .category { color: #dd0042; text-transform: uppercase; margin-bottom: 0.4rem; background-color: #189cd5; color: #fff; font-weight: 500; line-height: 100%; font-size: 12px; width: fit-content; padding: 4px 8px 2px; letter-spacing: 0.06rem; } .blog .card .card-block .card-title { color: #fff; font-size: 19px; line-height: 1.8rem; margin-bottom: 0.4rem; }