Card

A UI for emphasizing a group of content.

Title and Text

Card Title

Card text

html

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card text</p>
    </div>
</div>

Image

Top

Card Title

Card text

html

<div class="card">
    <img src="" class="card-img-top" alt="">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card text</p>
    </div>
</div>

Bottom

Card Title

Card text

html

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card text</p>
    </div>
    <img src="" class="card-img-bottom" alt="">
</div>

Header and Footer

Header

Card Title

Card text

Footer

html

<div class="card">
    <div class="card-header">
        Header
    </div>
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card text</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

Card Link

Card text

html

<div class="card">
    <div class="card-body">
        <h5 class="card-title"><a class="card-link" href="">Card Link</a></h5>
        <p class="card-text">Card text</p>
    </div>
</div>