<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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="row"> <div class="col-md-9"> <h2>Últimas Publicaciones</h2> <div class="row"> <div class="media"> <a class="media-left media-middle" href="#"> <img class="img-media media-object" src="http://s3.amazonaws.com/libapps/accounts/10097/images/blog.png" alt="Photo of Pukeko in New Zealand"> </a> <div class="media-body"> <h4 class="media-heading">Article Name</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#"><i class="fa fa-user"></i> Escrito por:</a></li> </ul> </div> </div> </div> <div class="row"> <div class="media"> <a class="media-left media-middle" href="#"> <img class="img-media media-object" src="http://s3.amazonaws.com/libapps/accounts/10097/images/blog.png" alt="Photo of Pukeko in New Zealand"> </a> <div class="media-body"> <h4 class="media-heading">Article Name</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#"><i class="fa fa-user"></i> Escrito por:</a></li> </ul> </div> </div> </div> <div class="row"> <div class="media"> <a class="media-left media-middle" href="#"> <img class="img-media media-object" src="http://s3.amazonaws.com/libapps/accounts/10097/images/blog.png" alt="Photo of Pukeko in New Zealand"> </a> <div class="media-body"> <h4 class="media-heading">Article Name</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia</p> <ul class="list-inline"> <li class="list-inline-item"><a href="#"><i class="fa fa-user"></i> Escrito por:</a></li> </ul> </div> </div> </div> </div> <div class="col-md-3"> <h2>Publicaciones del blog</h2> <div class="dropdown-divider"></div> <div class="media"> <a class="media-left media-middle" href="#"> <img class="img-media media-object" src="http://s3.amazonaws.com/libapps/accounts/10097/images/blog.png" alt="Photo of Pukeko in New Zealand"> </a> <div class="media-body"> <h4 class="media-heading">Title</h4> <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<a href="#"><i class="fa fa-link"></i>Ver mas</a></p> </div> </div> <div class="media"> <a class="media-left media-middle" href="#"> <img class="img-media media-object" src="http://s3.amazonaws.com/libapps/accounts/10097/images/blog.png" alt="Photo of Pukeko in New Zealand"> </a> <div class="media-body"> <h4 class="media-heading">Title 2</h4> <p>totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.<a href="#"><i class="fa fa-link"></i>Ver mas</a></p> </div> </div> </div> </div>

.img-media{ max-width: 6rem; }