"bootstrap 4 card "
Bootstrap 4.1.1 Snippet by Tawshif

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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="container"> <div class="row"> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://picsum.photos/200/150/?random"> <div class="card-block"> <h5 class="text-bold">Tawshif Ahsan Khan</h5> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://picsum.photos/200/150/?random "> <div class="card-block"> <h4 class="card-title">Tawshif Ahsan Khan</h4> <div class="meta"> <a href="#">Friends</a> </div> <div class="card-text"> Tawshif is a web designer living in Bangladesh. </div> </div> <div class="card-footer"> <span class="float-right">Joined in 2013</span> <span><i class=""></i>75 Friends</span> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://picsum.photos/200/150/?random "> <p class="card-block"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit quisquam veniam excepturi temporibus inventore corporis dicta sit culpa veritatis placeat earum, dolorum asperiores, delectus dolore voluptatibus, at magnam nobis! </p> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card"> <img class="card-img-top" src="https://picsum.photos/200/150/?random "> <div class="card-block"> <figure class="profile"> <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt=""> </figure> <h4 class="card-title mt-3">Tawshif Ahsan Khan</h4> <div class="meta"> <a>Friends</a> </div> <div class="card-text"> Tawshif is a web designer living in Bangladesh. </div> </div> <div class="card-footer"> <small>Last updated 3 mins ago</small> <button class="btn btn-secondary float-right btn-sm">show</button> </div> </div> </div> </div> <div class="row mb-5"> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-primary "> <img class="card-img-top" src="https://picsum.photos/200/150/?random"> <blockquote class="card-blockquote p-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <footer> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://picsum.photos/200/150/?random"> <div class="card-block"> <figure class="profile"> <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt=""> </figure> <h4 class="card-title mt-3">Tawshif Ahsan Khan</h4> <div class="meta card-text"> <a>Friends</a> </div> <div class="card-text"> Tawshif is a web designer living in Bangladesh. </div> </div> <div class="card-footer"> <small>Last updated 3 mins ago</small> <button class="btn btn-info float-right btn-sm">Follow</button> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://picsum.photos/200/150/?random"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Tawshif Ahsan Khan</h4> <div class="card-text"> Tawshif is a web designer living in Bangladesh. </div> </div> <div class="card-footer"> <small>Last updated 3 mins ago</small> <button class="btn btn-info float-right btn-sm">Follow</button> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://picsum.photos/200/150/?random"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Tawshif Ahsan Khan</h4> <div class="card-text"> Tawshif is a web designer living in Bangladesh. </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">Follow</button> </div> </div> </div> </div> </div>
html { font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; } h5 { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; margin: 0; } .card { font-size: 1em; overflow: hidden; padding: 0; border: none; border-radius: .28571429rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } .card-block { font-size: 1em; position: relative; margin: 0; padding: 1em; border: none; border-top: 1px solid rgba(34, 36, 38, .1); box-shadow: none; } .card-img-top { display: block; width: 100%; height: auto; } .card-title { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; } .card-text { clear: both; margin-top: .5em; color: rgba(0, 0, 0, .68); } .card-footer { font-size: 1em; position: static; top: 0; left: 0; max-width: 100%; padding: .75em 1em; color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(0, 0, 0, .05) !important; background: #fff; } .card-inverse .btn { border: 1px solid rgba(0, 0, 0, .05); } .profile { position: absolute; top: -12px; display: inline-block; overflow: hidden; box-sizing: border-box; width: 25px; height: 25px; margin: 0; border: 1px solid #fff; border-radius: 50%; } .profile-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; } .profile-inline { position: relative; top: 0; display: inline-block; } .profile-inline ~ .card-title { display: inline-block; margin-left: 4px; vertical-align: top; } .text-bold { font-weight: 700; } .meta { font-size: 1em; color: rgba(0, 0, 0, .4); } .meta a { text-decoration: none; color: rgba(0, 0, 0, .4); } .meta a:hover { color: rgba(0, 0, 0, .87); }

Related: See More


Questions / Comments:

thanks or sharing this, i am using in mine http://kalarikendramdelhi.com/

amar singh () - 2 years ago - Reply -1


Thank you for sharing this! Bootstrap cards are so useful in general but this design looks great.

Phil Alexandre () - 2 years ago - Reply -1


free templates Like

Ashif Mansuri () - 2 years ago - Reply -2