Bootstrap Snippet Card Styles using HTML CSS Bootstrap

"Card Styles"
Bootstrap 4.1.1 Snippet by vijay18399

4.1.1

841 0 Fav

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="//code.jquery.com/jquery-1.11.1.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="style.css" rel='stylesheet' > </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">Mean Stack</strong> <h6 class="mb-0"> <a class="text-dark" href="#">Conducted By : T-HUB</a> </h6> <div class="mb-1 text-muted small"> Published on Nov 12</div> <p class="card-text mb-auto "> <li class='text-muted small'>Date : 25-Nov-2018</li> <li class='text-muted small' >Price : 1000/-</li> <li class='text-muted small'>Instructor : Mr.Sandeep</li> <li class='text-muted small'>What You Get : T-Shirt, Certificate</li> </p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/arch" style="width: 200px; height: 250px;"> </div> </div> <div class="col-md-6"> <div class="card flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-success">Health</strong> <h6 class="mb-0"> <a class="text-dark" href="#">Food for Thought: Diet and Brain Health</a> </h6> <div class="mb-1 text-muted small">Nov 11</div> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/nature" style="width: 200px; height: 250px;"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card border-primary flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-primary">World</strong> <h6 class="mb-0"> <a class="text-dark" href="#">Conducted By T-HUB</a> </h6> <div class="mb-1 text-muted small"> Published on Nov 12</div> <li class='text-muted small'>Date : 25-Nov-2018</li> <li class='text-muted small' >Price : 1000/-</li> <li class='text-muted small'>Instructor : Mr.Sandeep</li> <li class='text-muted small'>What You Get : T-Shirt, Certificate</li> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/arch" style="width: 200px; height: 250px;"> </div> </div> <div class="col-md-6"> <div class="card border-success flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-success">Health</strong> <h6 class="mb-0"> <a class="text-dark" href="#">Food for Thought: Diet and Brain Health</a> </h6> <div class="mb-1 text-muted small">Nov 11</div> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/nature" style="width: 200px; height: 250px;"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="card text-white bg-primary flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-white">Mean Stack</strong> <h6 class="mb-0"> <a class="text-white" href="#">Conducted By T-HUB</a> </h6> <div class="mb-1 text-white-50 small"> Published on Nov 12</div> <p class="card-text mb-auto"> <li class='text-white small'>Date : 25-Nov-2018</li> <li class='text-white small' >Price : 1000/-</li> <li class='text-white small'>Instructor : Mr.Sandeep</li> <li class='text-white small'>What You Get : T-Shirt, Certificate</li></p> <button type="button" class="btn btn-default btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/arch" style="width: 200px; height: 250px;"> </div> </div> <div class="col-md-6"> <div class="card text-white bg-success flex-md-row mb-4 shadow-sm h-md-250"> <div class="card-body d-flex flex-column align-items-start"> <strong class="d-inline-block mb-2 text-white">Health</strong> <h6 class="mb-0"> <a class="text-white" href="#">Food for Thought: Diet and Brain Health</a> </h6> <div class="mb-1 text-white-50 small">Nov 11</div> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> <img class="card-img-right flex-auto d-none d-lg-block" alt="Thumbnail [200x250]" src="//placeimg.com/250/250/nature" style="width: 200px; height: 250px;"> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card mb-4"> <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Mean Stack</h5> <div class="mb-1 text-muted small"> Published on Nov 12</div> <li class='text-muted small'>Date : 25-Nov-2018</li> <li class='text-muted small' >Price : 1000/-</li> <li class='text-muted small'>Instructor : Mr.Sandeep</li> <li class='text-muted small'>What You Get : T-Shirt, Certificate</li> <br> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 border-dark"> <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 text-white bg-dark"> <img class="card-img-top" src="//placeimg.com/290/180/any" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> </div> </div> </div> <h3 class="mt-3 pb-3 mb-4 font-italic border-bottom"> Image overlays </h3> <div class="row"> <div class="col-md-8"> <div class="card mb-4 bg-dark text-white"> <img class="card-img" src="//placeimg.com/780/270/any" alt="Card image"> <div class="card-img-overlay"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Last updated 3 mins ago</p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4 bg-dark text-white"> <img class="card-img" src="//placeimg.com/250/180/any" alt="Card image"> <div class="card-img-overlay"> <h5 class="card-title">Mean Stack</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">Published 3 mins ago</p> </div> </div> </div> </div> <h3 class="mt-3 pb-3 mb-4 font-italic border-bottom"> Social Cards </h3> <div class="row"> <div class="col-md-3"> <div class="card mb-4"> <div class="social-card-header align-middle text-center bg-facebook"> <i class="fab fa-facebook-square"></i> </div> <div class="card-body text-center"> <div class="row"> <div class="col border-right"> <i class="far fa-thumbs-up text-facebook"></i> <span class="text-muted">Like</span> <div class="font-weight-bold">12K</div> </div> <div class="col"> <i class="fas fa-share-alt text-facebook"></i> <span class="text-muted">Share</span> <div class="font-weight-bold">10K</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card mb-4"> <div class="social-card-header align-middle text-center bg-google-plus"> <i class="fab fa-google-plus-square"></i> </div> <div class="card-body text-center"> <div class="row"> <div class="col border-right"> <i class="fab fa-google-plus-g text-google-plus"></i> <span class="text-muted">Like</span> <div class="font-weight-bold">12K</div> </div> <div class="col"> <i class="fas fa-share-alt text-google-plus"></i> <span class="text-muted">Share</span> <div class="font-weight-bold">10K</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card mb-4"> <div class="social-card-header align-middle text-center bg-twitter"> <i class="fab fa-twitter-square"></i> </div> <div class="card-body text-center"> <div class="row"> <div class="col border-right"> <i class="fab fa-twitter text-twitter"></i> <span class="text-muted">Tweet</span> <div class="font-weight-bold">12K</div> </div> <div class="col"> <i class="fas fa-share-alt text-twitter"></i> <span class="text-muted">Share</span> <div class="font-weight-bold">10K</div> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card mb-4"> <div class="social-card-header align-middle text-center bg-pinterest"> <i class="fab fa-pinterest-square"></i> </div> <div class="card-body text-center"> <div class="row"> <div class="col border-right"> <i class="fab fa-pinterest-p text-pinterest"></i> <span class="text-muted">Pin</span> <div class="font-weight-bold">12K</div> </div> <div class="col"> <i class="fas fa-share-alt text-pinterest"></i> <span class="text-muted">Share</span> <div class="font-weight-bold">10K</div> </div> </div> </div> </div> </div> </div> <h3 class="mt-3 pb-3 mb-4 font-italic border-bottom"> More Cards </h3> <div class="row"> <div class="col-md-4"> <div class="card"> <img class="card-img-top" src="//placeimg.com/280/180/tech" alt="Card image cap"> <div class="card-body"> <h5 class="card-title border-bottom pb-3">Card title <a href="#" class="float-right d-inline-flex share"><i class="fas fa-share-alt text-primary"></i></a></h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="float-right">Read more <i class="fas fa-angle-double-right"></i></a> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-img-top" src="//placeimg.com/280/180/tech" alt="Card image cap"> <div class="card-body"> <h5 class="card-title border-bottom pb-3">Card title <a href="#" class="float-right btn btn-sm btn-info d-inline-flex share"><i class="fas fa-share-alt"></i></a></h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> </div> </div> <div class="col-md-4"> <div class="card bg-light"> <img class="card-img-top" src="//placeimg.com/280/180/tech" alt="Card image cap"> <div class="card-body"> <h5 class="card-title border-bottom pb-3">Card title <a href="#" class="float-right btn btn-sm btn-info d-inline-flex share"><i class="fas fa-share-alt"></i></a></h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <button type="button" class="btn btn-outline-primary btn-sm " data-toggle="modal" data-target="#myModal"> Continue reading </button> </div> </div> </div> </div> <hr> <a href="http://www.jquery2dotnet.com/" class="mx-auto pb-3 text-center"> <img alt="jQuery 2 DotNet" class="rounded mx-auto d-block" height="52px;" src="http://1.bp.blogspot.com/-z27K-NYYSi4/Vsg9Mdl1A_I/AAAAAAAAEbo/SbDbMENIiVQ/s1600-r/jQuery2DotNet.png" style="display: block" width="208px; "> </a> </div>  <div class="modal fade" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content">  <div class="modal-header"> <center> <h4 class="modal-title">Workshop Details</h4></center> <button type="button" class="close" data-dismiss="modal">×</button> </div>  <div class="modal-body"> <article> <center> <h3 class="d-inline-block mb-2 text-primary">Mean Stack</h3></center>  <dl class="item-property"> <dt> Description</dt><dd> <blockquote> <p class='small'>MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. The MEAN stack is MongoDB, Express.js, AngularJS, and Node.js.</p> </blockquote></dd> <div class='row'> <div class='col-6'> <dt>Price</dt> <dd class='small'>1200</dd>  <dt>What You get:</dt> <dd class='small'>T-Shirt ,Certficate</dd>  <dt>Date</dt> <dd class='small'>12-NOV-2018</dd> <dt>Venue</dt> <dd class='small'>College :AEC</dd> <dd class='small'>FLOOR :1</dd> <dd class='small'>ROOM NO: 121</dd> <dd class='small'>LAB : 1</dd>  </div> <div class="col-6"> <dt>Conducted By</dt> <dd class='small'>T-HUB</dd>  <dt>Instructor:</dt> <dd class='small'>Mr.Sandeep</dd>  <dt>Published On</dt> <dd class='small'> 12-NOV-2018</dd> <dt>prerequisite</dt> <dd class='small'>HTML</dd> <dd class='small'>CSS</dd> <dd class='small'>JAVASCRIPT</dd> <dd class='small'>JQUERY</dd> </div> </div> </dl>  <div class="modal-footer"> <button type="button" class="btn btn-danger btn-outline-primary" data-dismiss="modal">Close</button> </div> </div> </div></div> </div> </div> </body> </html>

li { list-style: none; } .social-card-header{ position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; height: 96px; } .social-card-header i { font-size: 32px; color:#FFF; } .bg-facebook { background-color:#3b5998; } .text-facebook { color:#3b5998; } .bg-google-plus{ background-color:#dd4b39; } .text-google-plus { color:#dd4b39; } .bg-twitter { background-color:#1da1f2; } .text-twitter { color:#1da1f2; } .bg-pinterest { background-color:#bd081c; } .text-pinterest { color:#bd081c; } .share:hover { text-decoration: none; opacity: 0.8; }

Related: See More

Datepicker

Card Styles

bootstrap 4 card

bootstrap 4 card

Bootstrap Social Card

Bootstrap Social Card

Questions / Comments:

Posting GuidelinesFormatting