<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 class="news-section"> <div class="container"> <div class="col-md-3 news-column"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> <h4>LOREM IPSUM DOLO</h4> <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele risque auctor volutpat et massa.</p> <a href="single.html"><h5>Integer vitae ligula sed lectus</h5></a> </div> <div class="col-md-3 news-column"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> <h4>LOREM IPSUM DOLO</h4> <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele risque auctor volutpat et massa.</p> <a href="single.html"><h5>Integer vitae ligula sed lectus</h5></a> </div> <div class="col-md-3 news-column"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> <h4>LOREM IPSUM DOLO</h4> <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele risque auctor volutpat et massa.</p> <a href="single.html"><h5>Integer vitae ligula sed lectus</h5></a> </div> <div class="col-md-3 news-column"> <img class="img-responsive" src="https://images.pexels.com/photos/7096/people-woman-coffee-meeting.jpg?w=940&h=650&auto=compress&cs=tinysrgb" title="name"> <h4>LOREM IPSUM DOLO</h4> <p>Pellentesque ut urna eu mauris scele risque auctor volutpat et massa pers piciis iste natus scele risque auctor volutpat et massa.</p> <a href="single.html"><h5>Integer vitae ligula sed lectus</h5></a> </div> </div> </div>

.news-section { padding: 4em 0 3.5em; } .news-column h4 { font-size: 1.3em; text-transform: uppercase; color: #000; font-weight: 700; padding: 0.8em 0 0.3em; margin: 0; } .news-column p { color: #777; line-height: 1.7em; padding: 0.1em 0 0em; display: block; font-size: 1em; } .news-column:hover { background-color :aqua; }