<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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"> <h1 class="text-xs-center">Bootstrap 4 Alpha Cards</h1> <h2>Card Decks</h2> <div class="card-deck-wrapper"> <div class="card-deck"> <div class="card"> <img class="card-img-top" src="http://placeskull.com/355/170/225378" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a longer 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"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="http://placeskull.com/355/170/1695A3" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card"> <img class="card-img-top" src="http://placeskull.com/355/170/ACF0F2" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> <hr /> <h2>Masonry Column</h2> <div class="card-columns"> <div class="card"> <img class="card-img-top" src="http://placeskull.com/355/170/F3FFE2" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title that wraps to a new line</h4> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> <div class="card card-block"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card"> <img class="card-img-top" src="http://placeskull.com/355/170/EB7F00" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <div class="card card-block card-inverse card-primary text-xs-center"> <blockquote class="card-blockquote"> <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 class="card card-block text-xs-center"> <h4 class="card-title">Card title</h4> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> <div class="card"> <img class="card-img" src="http://placeskull.com/362/170/3E454C" alt="Card image"> </div> <div class="card card-block text-xs-right"> <blockquote class="card-blockquote"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer> <small class="text-muted"> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card card-block"> <h4 class="card-title">Card title</h4> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> <hr /> <section class="row"> <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <h3>Responsive Masonry Column</h3> </article> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <img src="http://placeskull.com/350/170/2185C5" alt="" class="card-img-top img-fluid" /> <div class="card card-block"> <h4 class="card-title">Antony Cano</h4> <p class="card-text">Photographer | Filmaker</p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <img src="http://placeskull.com/350/170/7ECEFD" alt="" class="card-img-top img-fluid" /> <div class="card card-block"> <h4 class="card-title">Antony Cano</h4> <p class="card-text">Photographer | Filmaker</p> </div> </div> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> <img src="http://placeskull.com/350/170/FFF6E5" alt="" class="card-img-top img-fluid" /> <div class="card card-block"> <h4 class="card-title">Antony Cano</h4> <p class="card-text">Photographer | Filmaker</p> </div> </div> </section> </div>