"Blog posts con imagen BS4"
Bootstrap 4.0.0 Snippet by meiwenti

Post to Facebook Tweet this

<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 ----------> <html> <head> <title>Blog posts con imagen BS4</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css"> </head> <body> <div class="container"> <h2 class="card-header display-4 text-center"><i class="ion-person"></i>Blog posts con imagen BS4 </h2> <span class="display-6 text-center text-muted">Diseño tomado de "Blog posts with by <a href="https://bootsnipp.com/msurguy" target="_blank">msurguy</a>", adaptado a bootstrap 4 y rediseñado</span> <div class="row p-2"> <div class="col-sm-6 contpost"> <div class="row"> <div class="col PostTitle"> <h4><a href="#">Title of the post</a></h4> <div class="PostDate"><i class="fa fa-calendar"></i> Sept 8, 2017</div> </div> </div> <div class="row"> <div class="col-sm-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </div> <div class="col-sm-6"> <p> Una descripción breve para decirle al usuario que es lo que contiene el post! </p> <p><a class="btn btn-sm btn-success" href="#">Leer más</a></p> </div> </div> <div class="row"> <div class="col text-center small p-2"> <p> <i class="fa fa-user-circle"></i> by <a href="#">Miguel92</a> | <i class="fa fa-comment"></i> <a href="#">3 Comments</a> | <i class="fa fa-share"></i> <a href="#">39 Shares</a> | <i class="fa fa-tags"></i> Tags : <a href="#"><span class="badge badge-info">Snipp</span></a> <a href="#"><span class="badge badge-info">Bootstrap</span></a> <a href="#"><span class="badge badge-info">UI</span></a> <a href="#"><span class="badge badge-info">growth</span></a> </p> </div> </div> </div> <div class="col-sm-6 contpost"> <div class="row"> <div class="col PostTitle"> <h4><a href="#">Title of the post</a></h4> <div class="PostDate"><i class="fa fa-calendar"></i> Sept 7, 2017</div> </div> </div> <div class="row"> <div class="col-sm-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/260x180" alt=""> </a> </div> <div class="col-sm-6"> <p> Una descripción breve para decirle al usuario que es lo que contiene el post! </p> <p><a class="btn btn-sm btn-success" href="#">Leer más</a></p> </div> </div> <div class="row"> <div class="col text-center small p-2"> <p> <i class="fa fa-user-circle"></i> by <a href="#">Miguel92</a> | <i class="fa fa-comment"></i> <a href="#">3 Comments</a> | <i class="fa fa-share"></i> <a href="#">39 Shares</a> | <i class="fa fa-tags"></i> Tags : <a href="#"><span class="badge badge-info">Snipp</span></a> <a href="#"><span class="badge badge-info">Bootstrap</span></a> <a href="#"><span class="badge badge-info">UI</span></a> <a href="#"><span class="badge badge-info">growth</span></a> </p> </div> </div> </div> </div> </div> <div class="clearfix"> </div> <h5 class="text-center">Copyright © 2017 - Miguel92</h5> </div> </body> </html>
.contpost { margin-top: 10px; } .PostTitle { padding: 5px; } .PostDate { float: right; font-size: 14px; margin-top: -26px; margin-right: 10px; }

Related: See More

BLK• Design System
Bootstrap 4 Blog Carousel
List of Blog Posts

Questions / Comments: