<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-9"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="banner img-fluid" src="https://images.alphacoders.com/102/102211.jpg" alt="First slide"> </div> <div class="carousel-item"> <img class="banner img-fluid" src="https://images.alphacoders.com/102/102211.jpg" alt="Second slide"> </div> <div class="carousel-item"> <img class="banner img-fluid" src="https://images.alphacoders.com/102/102211.jpg" alt="Third slide"> <div class="carousel-caption"> <h3>Here Tst</h3> <p>Hi, Im Text</p> </div> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <div class="col-md-3"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p> <h4>Subheading</h4> <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p> </div> </div> <div class="dropdown-divider"></div> <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> <div class="dropdown-divider"></div> </div>

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