<h2 class="display-1">Bootstrap 4 Cards Demo</h2>
<h4 class="title">Demo Card with everything</h4>
<div class="demo-card">
    <div class="card">
        <div class="card-header">
            This is a card header
        </div>
        <img class="card-img-top" src="http://placekitten.com/500/200">
        <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <h6 class="card-subtitle text-muted">Support card subtitle</h6>
            <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>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
        </div>
        <div class="card-block">
            <a href="#" class="card-link">Card link</a>
            <a href="#" class="card-link">Another link</a>
        </div>
        <div class="card-block">
            <a href="#" class="btn btn-primary">Button</a>
        </div>
        <div class="card-footer text-muted">
            This is a card footer
        </div>
    </div>
</div>
<h4 class="title">Background Variant Cards</h4>
<div class="demo-card">
    <div class="card card-inverse card-primary text-center">
        <div class="card-block">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card card-inverse card-success text-center">
        <div class="card-block">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card card-inverse card-info text-center">
        <div class="card-block">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card card-inverse card-warning text-center">
        <div class="card-block">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
    <div class="card card-inverse card-danger text-center">
        <div class="card-block">
            <blockquote class="card-blockquote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in
                    <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>
<h4 class="title">Card Groups <small>(notice matched heights)</small></h4>
<div class="demo-card">
    <div class="card-group">
        <div class="card">
            <img class="card-img-top img-responsive" src="http://placekitten.com/500/304">
            <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 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 img-responsive" src="http://placekitten.com/500/304">
            <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 img-responsive" src="http://placekitten.com/500/304">
            <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>
<h4 class="title">Card Decks <small>(notice matched heights)</small></h4>
<div class="demo-card">
    <div class="card-deck-wrapper">
        <div class="card-deck">
            <div class="card">
                <img class="card-img-top img-responsive" src="http://placekitten.com/500/304">
                <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 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 img-responsive" src="http://placekitten.com/500/304">
                <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 img-responsive" src="http://placekitten.com/500/304">
                <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>
</div>
h2 {
    text-align: center;
    margin: 30px 0;
}
.demo-card {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 100px;
}
h4.title {
  text-align: center;
}
Run Pen

External CSS

  1. https://cask.scotch.io/bootstrap-4.0.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
  2. https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js