"Responsive Cards "
Bootstrap 4.1.1 Snippet by BrettMchatton

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 ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"/> <title>Responsive Bootstrap Cards</title> <link href="http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png" rel="icon"/> </head> <body class="bg-light"> <!-- main container --> <div class="container bg-light"> <!-- cards --> <div id="cards" class="bg-light"> <h3 class="font-weight-light text-center my-3">Cards</h3> <!-- mobile Card container --> <div class="row d-md-none my-3"> <!-- Card # --> <div class="col-10 container mt-3 mx-auto p-0 bg-white border rounded"> <div class="bg-primary text-light py-1 m-0"> <h5 class="px-2 my-auto">Card Title</h5> </div> <div class="row"> <div class="col-5 my-auto"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" class="img-fluid"/> </div> <div class="col-7 d-flex flex-column "> <p class="p-2 mt-2">Shortest description of the Card.</p> <div class="mt-auto mx-auto py-2 border-top"> <button class="btn btn-outline-primary text-primary d-block">Action</button> </div> </div> </div> </div><!-- /Card # --> <!-- Card # --> <div class="col-10 container mt-3 mx-auto p-0 bg-white border-right border-bottom"> <div class="bg-primary text-light py-1 m-0 rounded-top"> <h5 class="px-2 my-auto">Card Title</h5> </div> <div class="row"> <div class="col-5 my-auto"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" class="img-fluid"/> </div> <div class="col-7 d-flex flex-column "> <p class="p-2 mt-2">Shortest description of the Card.</p> <div class="mt-auto mx-auto py-2 border-top"> <button class="btn btn-outline-primary text-primary d-block">Action</button> </div> </div> </div> </div><!-- /Card # --> <!-- Card # --> <div class="col-10 container mt-3 mx-auto p-0 bg-white border rounded"> <div class="bg-primary text-light py-1 m-0"> <h5 class="px-2 my-auto">Card Title</h5> </div> <div class="row"> <div class="col-5 my-auto"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" class="img-fluid"/> </div> <div class="col-7 d-flex flex-column "> <p class="p-2 mt-2">Shortest description of the Card.</p> <div class="mt-auto mx-auto py-2 border-top"> <button class="btn btn-outline-primary text-primary d-block">Action</button> </div> </div> </div> </div><!-- /Card # --> <!-- Card # --> <div class="col-10 container mt-3 mx-auto p-0 bg-white border-right border-bottom"> <div class="bg-primary text-light py-1 m-0 rounded-top"> <h5 class="px-2 my-auto">Card Title</h5> </div> <div class="row"> <div class="col-5 my-auto"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" class="img-fluid"/> </div> <div class="col-7 d-flex flex-column "> <p class="p-2 mt-2">Shortest description of the Card.</p> <div class="mt-auto mx-auto py-2 border-top"> <button class="btn btn-outline-primary text-primary d-block">Action</button> </div> </div> </div> </div><!-- /Card # --> </div><!-- /mobile Card container --> <!-- full size Card container --> <div class="container-fluid mx-auto d-none d-md-block my-3"> <div class="row"> <!-- Card # --> <div class="col-6 col-lg-3 d-flex mb-3"> <div class="card flex-fill"> <div class="card-header bg-primary text-light rounded">Card Title</div> <div class="card-body"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" alt="card-alt-img-text" class="card-img-top img-fluid" /> <p class="my-2">Shorter description of the card.</p> </div> <div class="card-footer"> <button class="btn btn-outline-primary text-primary d-block w-75 mx-auto">Action</button> </div> </div> </div><!-- Card # --> <!-- Card # --> <div class="col-6 col-lg-3 d-flex mb-3"> <div class="card flex-fill"> <div class="card-header bg-primary text-light rounded">Card Title</div> <div class="card-body"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" alt="card-alt-img-text" class="card-img-top img-fluid" /> <p class="my-2">Shorter description of the card. The size of the cards will adjust to the length of the longest description. I would still recommend keeping it short and sweet.</p> </div> <div class="card-footer"> <button class="btn btn-outline-primary text-primary d-block w-75 mx-auto">Action</button> </div> </div> </div><!-- Card # --> <!-- Card # --> <div class="col-6 col-lg-3 d-flex mb-3"> <div class="card flex-fill"> <div class="card-header bg-primary text-light rounded">Card Title</div> <div class="card-body"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" alt="card-alt-img-text" class="card-img-top img-fluid" /> <p class="my-2">Shorter description of the card.</p> </div> <div class="card-footer"> <button class="btn btn-outline-primary text-primary d-block w-75 mx-auto">Action</button> </div> </div> </div><!-- Card # --> <!-- Card # --> <div class="col-6 col-lg-3 d-flex mb-3"> <div class="card flex-fill"> <div class="card-header bg-primary text-light rounded">Card Title</div> <div class="card-body"> <img src="https://dgeiu3fz282x5.cloudfront.net/g/l/l-143641.jpg" alt="card-alt-img-text" class="card-img-top img-fluid" /> <p class="my-2">Shorter description of the card.</p> </div> <div class="card-footer"> <button class="btn btn-outline-primary text-primary d-block w-75 mx-auto">Action</button> </div> </div> </div><!-- Card # --> </div> </div><!-- /full size Card container --> </div><!-- /cards --> </div> <!-- /main container --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>

Related: See More

Datepicker
Responsive Data Cards (Bootstrap 4)
Information Cards
Bootstrap 4 and CCS3 Product Cards with Transition

Questions / Comments: