"Bootstrap 4.3 Cards"
Bootstrap 4.1.1 Snippet by BelarusAndreas

Post to Facebook Tweet this

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <br> <div class="container"> <h4 class="text-center">Bootstrap 4.3 Cards</h4> <h5 class="text-center small">Bootstrap responsive cards with card-image, card-header, card-body, card-listed tags and card-footer without any additional CSS or JS. Just pure Bootstrap :)</h5> </div><br> <div class="container"><br><br> <!-- ::::: Begin cards ::::: --> <div class="container"> <div class="card-deck"> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-primary"> <div class='card-header bg-primary'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>First Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, ...</p> </div> <div class='card-footer text-center bg-primary'> <a href='#' class='btn btn-primary stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-success"> <div class='card-header bg-success'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Second Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor ...</p> </div> <div class='card-footer text-center bg-success'> <a href='#' class='btn btn-success stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-danger"> <div class='card-header bg-danger'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Third Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> </div> <div class='card-footer text-center bg-danger'> <a href='#' class='btn btn-danger stretched-link'>Read more</a> </div> </div> </div> <div class="col-lg-3 col-md-4 col-sm-6 mb-4"> <div class="card h-100 border-warning"> <div class='card-header bg-warning'> <img class='card-img-top rounded' src="https://placeimg.com/500/500/any"> </div> <div class='card-body'> <h4 class='card-title'><a href='$path'>Fourth Card</a></h4> <ul class='list-unstyled'> <li> <span class='badge badge-primary'>Tag</span> <span class='badge badge-success'>Tag</span> <span class='badge badge-danger'>Tag</span> <span class='badge badge-warning'>Tag</span> </li> </ul> <p class='card-text'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...</p> </div> <div class='card-footer text-center bg-warning'> <a href='#' class='btn btn-warning text-light stretched-link'>Read more</a> </div> </div> </div> </div> <!-- ::::: End cards ::::: --> <!-- Note: If your dont need the following button, please close the div container before this ending line with </div> ---> <!-- ::::: Start additional button ::::: --> <div class="container"> <a href="#" class="text-decoration-none"> <button type="button" class="btn btn-primary btn-lg btn-block">Show all</button> </a> </div><br><br> <!-- ::::: End additional button ::::: --> </div> <div class="text-center"> <p class="small text-dark">You need Cards with a Corner Ribbon? Have a look at this <a href="https://bootsnipp.com/user/snippets/mQpky">Snippet</a></p> <p class="small text-dark">If you like it, please spend me a coffee :)</p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <input type="hidden" name="cmd" value="_s-xclick" /> <input type="hidden" name="hosted_button_id" value="HKBSPX48YNWUQ" /> <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> <img alt="" border="0" src="https://www.paypal.com/en_BY/i/scr/pixel.gif" width="1" height="1" /> </form><br><br> </div> <body>
/* Without any other css */
/* Without any other js */

Related: See More

Vue Argon Design System
Information Cards
Responsive Data Cards (Bootstrap 4)
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: