<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 ----------> <section class="blog_sec"> <div class="container"> <div class="row"> <div class="col-md-12 blog_cont text-center"> <h5 class="haeding_yelow">Latest News & Blog</h5> <h2 class="heading2">Latest blog</h2> </div> </div> <div class="row"> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/08/07/14/02/people-2604149_960_720.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Donate for nutrition less poor people</h5> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p> <a href="#" class="txt-yelow my-3">Read More<i class="fa fa-long-arrow-right" ></i></a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/08/07/14/02/people-2604149_960_720.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Charity meetup in Berline next year</h5> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p> <a href="#" class="txt-yelow my-3">Read More<i class="fa fa-long-arrow-right" ></i></a> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-12"> <div class="card"> <img src="https://cdn.pixabay.com/photo/2017/08/07/14/02/people-2604149_960_720.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Donate for the poor people to help them</h5> <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cupiditate sit ducimus dolor laudantium distinction</p> <a href="#" class="txt-yelow my-3">Read More<i class="fa fa-long-arrow-right" ></i></a> </div> </div> </div> </div> </div> </section>

/* ========================================================================== Blog Css Start ========================================================================== */ .blog_sec { background: #FBF7F1; } .card { margin-top: 20px; } .card-title { font-size: 24px; font-weight: 400; line-height: 32px; } .card-text { font-size: 16px; line-height: 28px; } .txt-yelow { color: #f39811; display: block; } .txt-yelow:hover { text-decoration: underline; } .txt-yelow i { padding-left: 5px; }