PRIMARY PAGE HEADER

Card

Body

The most basic configuration.

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

Title, subtitle, text

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

Title
Subtitle

Text in a card body.

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

Header and footer

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

Card-header in a div
Title

Text in a card body.

Footer
Card-header in a <h5>-tag
Title

Text in a card body.

Footer 
<div class="card mb-3">
    <div class="card-header">
        Card-header in a div
    </div>
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text in a card body.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

<div class="card">
    <h5 class="card-header">Card-header in a h5-tag</h5>
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text in a card body.</p>
    </div>
    <div class="card-footer">
        Footer
    </div>
</div>

Card decks

Card decks makes nested cards the same width and height

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Title

Lorem ipsum dolor sit amet.

Footer
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Footer 
<div class="card-deck">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Title</h5>
            <p class="card-text">. . .</p>
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>

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

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

Styles

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

Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
Header
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Footer
<div class="card bg-primary text-white">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Title</h5>
        <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">
        <h5 class="card-title">Title</h5>
        <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">
        <h5 class="card-title">Title</h5>
        <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>