Card

The most basic configuration.

<div class="card">
    <div class="card-body">
        Text in a card body.
    </div>
</div>

The card-title and card-subtitle are used with <h*> tags. The card-text removes the bottom ragin of the last child.

<div class="card">
    <div class="card-body">
        <h6 class="card-title">Title <small>Subtitle<small></h6>
        <p class="card-text">Text in a card body.</p>
    </div>
</div>

Use the card-header on a div or an <h*> tag

<div class="card">
    <div class="card-header">
        <h6 class="card-title">title in header (preferred)</h6>
    </div>
    <div class="card-body">
        <p class="card-text">Text in body.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

<div class="card">
    <div class="card-header card-header-default">
        Title in header
    </div>
    <div class="card-body">
        <p class="card-text">Text in body.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

<div class="card">
    <div class="card-body">
        <h6 class="card-title">title in body</h6>
        <p class="card-text">Text in body.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

Card decks makes nested cards the same width and height

<div class="card-deck">
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Title</h6>
        </div>
        <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Title</h6>
        </div>
        <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet.</p>
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
    
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">Title</h6>
        </div>
        <div class="card-body">
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
</div>

Use the .bg-* and .text-* classes to style the cards.

<div class="card bg-primary text-white">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h6 class="card-title">Title</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </div>
    <div class="card-footer">Footer</div>
</div>

<div class="card bg-secondary text-white">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h6 class="card-title">Title</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </div>
    <div class="card-footer">Footer</div>
</div>

<div class="card bg-light text-dark">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h6 class="card-title">Title</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
    </div>
    <div class="card-footer">Footer</div>
</div>