"Card-bootstrap-4"
Bootstrap 4.0.0 Snippet by muzlomnezarabotat

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>Card Bootstrap 4</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"> <div class="card"> <h2 class="card-header display-4 text-center">Card bootstrap 4 </h2> <span class="display-6 text-center text-muted">Diseño tomado de "Card by <a href="https://bootsnipp.com/evarevirus" target="_blank">evarevirus</a>", adaptado a bootstrap 4 y rediseñado</span> <div class="card-body"> <div class="row"> <div class="col-sm-6"> <figure class="card4 blue" style="height: 280px;"> <img class="img-fluid cabecera" src="https://k35.kn3.net/taringa/6/1/9/1/4/8/7/noelia2304/59A.jpg" alt="Imagen de portada"> <figcaption> <h2>Miguel92 </h2> <p>Hola bienvenidos al mensaje</p> <div class="icons"> <a class="btn btn-sm btn-success" href="#" title="Ver perfil de Miguel92"><i class="fa fa-user-circle" aria-hidden="true"></i></a> <a class="btn btn-sm btn-primary" href="#" title="Enviar mensaje"><i class="fa fa-envelope" aria-hidden="true"></i></a> <a class="btn btn-sm btn-success" href="#" title="Seguir usuario"><i class="fa fa-eye" aria-hidden="true"></i></a> </div> </figcaption> <div class="image"><img src="http://31.media.tumblr.com/tumblr_lw2lhqjrel1qfmi03o9_r1_500.gif" class="img-thumbnail" alt="avatar"/></div> <div class="position"> Es un hombre y esta viviendo en Argentina.</div> </figure> </div> <div class="col-sm-6"> <figure class="card4 red" style="height: 200px;"> <figcaption> <h2>Joel Miguel Valente</h2> <p>Bienvenidos a mi mundo!</p> <div class="icons"> <a class="btn btn-sm btn-success" href="#" title="Ver perfil de Miguel92"><i class="fa fa-user-circle" aria-hidden="true"></i></a> <a class="btn btn-sm btn-info" href="#" title="Enviar mensaje"><i class="fa fa-envelope" aria-hidden="true"></i></a> <a class="btn btn-sm btn-success" href="#" title="Seguir usuario"><i class="fa fa-eye" aria-hidden="true"></i></a> </div> </figcaption> <div class="image"><img class="img-thumbnail" src="https://orig07.deviantart.net/3cb7/f/2015/182/6/2/avatar_danger_gaming_2_by_skadidesigns-d8zh36e.png" alt="sample4"/></div> <div class="position"> Es un hombre y esta viviendo en Argentino.</div> </figure> </div> </div> </div> </div> </div> <div class="clearfix"> </div> <h5 class="text-center">Copyright © 2017 - Miguel92</h5> </div> </body> </html>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800); .cabecera { width: 100%; height: 120px; float: left; margin-bottom: -60px; } figure.card4 { font-family: 'Raleway', Arial, sans-serif; position: relative; overflow: hidden; min-width: 380px; max-width: 380px; width: 100%; background: #ffffff; color: #000000; border: 2px solid #CCC; } figure.card4 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } figure.card4 .image { width: 50%; overflow: hidden; z-index: 1; padding-left: 10px; padding-top: 10px; } figure.card4 .image img { position: relative; display: block; left: -0%; z-index: 1; padding: 5px; width: 60%; } figure.card4:before { position: absolute; content: ''; height: 100%; width: 45%; } figure.card4 figcaption { padding: 20px; position: absolute; right: 0; bottom: 10px; width: 100%; } figure.card4 figcaption img { margin-bottom: -20px; } figure.card4 figcaption h2, figure.card4 figcaption p { margin: 0; text-align: right; padding: 10px 0; width: 100%; } figure.card4 figcaption h2 { font-size: 1.3em; font-weight: 300; text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } figure.card4 figcaption h2 span { font-weight: 800; } figure.card4 figcaption p { font-size: 0.9em; opacity: 0.8; } figure.card4 figcaption .icons { width: 100%; text-align: right; } figure.card4 figcaption .icons i { font-size: 20px; padding: 5px; top: 50%; opacity: 0; } figure.card4 .position { position: absolute; bottom: 0; width: 100%; text-align: right; padding: 15px 30px; font-size: 0.9em; opacity: 1; font-style: italic; color: #ffffff; background: #000000; } figure.card4.blue .position { background: #20638f; } figure.card4.red .position { background: #962d22; } figure.card4.yellow .position { background: #bf6516; } figure.card4:hover figcaption, figure.card4.hover figcaption { bottom: 40px; } figure.card4:hover .icons i, figure.card4.hover .icons i { opacity: 1; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }

Related: See More

Light Bootstrap Dashboard Pro Angular
bootstrap 4 card
Card Styles
Bootstrap Social Card

Questions / Comments: