<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 ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <div class="container"> <h3 class="pb-3 mb-4 font-italic border-bottom"> Card Styles </h3> <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">World</strong> <h6 class="mb-0"> <a class="text-dark" href="#">40 Percent of People Can’t Afford Basics</a> </h6> <div class="mb-1 text-muted small">Nov 12</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> <a class="btn btn-outline-primary btn-sm" role="button" href="http://www.jquery2dotnet.com/">Continue reading</a> </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> <a class="btn btn-outline-success btn-sm" href="http://www.jquery2dotnet.com/">Continue reading</a> </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="#">40 Percent of People Can’t Afford Basics</a> </h6> <div class="mb-1 text-muted small">Nov 12</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> <a class="btn btn-outline-primary btn-sm" role="button" href="http://www.jquery2dotnet.com/">Continue reading</a> </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> <a class="btn btn-outline-success btn-sm" href="http://www.jquery2dotnet.com/">Continue reading</a> </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">World</strong> <h6 class="mb-0"> <a class="text-white" href="#">40 Percent of People Can’t Afford Basics</a> </h6> <div class="mb-1 text-white-50 small">Nov 12</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> <a class="btn btn-outline-light btn-sm" role="button" href="http://www.jquery2dotnet.com/">Continue reading</a> </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> <a class="btn btn-outline-light btn-sm" href="http://www.jquery2dotnet.com/">Continue reading</a> </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">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> <a href="http://www.jquery2dotnet.com/" class="btn btn-outline-dark btn-sm">Go somewhere</a> </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> <a href="http://www.jquery2dotnet.com/" class="btn btn-dark btn-sm">Go somewhere</a> </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> <a href="http://www.jquery2dotnet.com/" class="btn btn-outline-light btn-sm">Go somewhere</a> </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">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> <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> <a href="#" class="btn btn-sm btn-info float-right">Read more <i class="fas fa-angle-double-right"></i></a> </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> <a href="#" class="btn btn-sm btn-info float-right">Read more <i class="fas fa-angle-double-right"></i></a> </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>

.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; }