Card

The changes made to the card classes are mostly related to spacings.

The header and footer has white backgrounds as default instead of light gray. Use the Bootstrap class .bg-light on .card-header and .card-footer to make it look like the Bootstrap default.

Example

Header

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

<div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <h6 class="card-subtitle mb-2 text-muted">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>
        <button class="btn btn-primary">Go somewhere</button>
    </div>
    <div class="card-footer">Footer</div>
</div>

Card Table

You can have a table bypass the .card-body gutter and span the full width of the card for a stylish look. Just wrap the <table> tag with a div with .card-table and remove the padding on the y-axis on .card-body and the bottom margin of the table with .margin-bottom.

The styling can be used to gice the table rounded corners which can't be done by using the .rounded-* classes.

#	1	2	3
1	A	A	A
2	B	B	B

<div class="card">
    <div class="card-body py-0">            
        <div class="card-table">
            <table class="table mb-0">
                ...
            </table>
        </div>          
    </div>
</div>

This is a headline

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit molestias labore consequuntur ut temporibus vero quasi recusandae culpa, esse doloremque ullam odio distinctio quibusdam laborum adipisci nam porro, quos quisquam veniam voluptatibus rerum unde.

#	1	2	3
1	A	A	A
2	B	B	B
3	C	C	C

<div class="card">
    <div class="card-body pb-0">
        <h3 class="card-title">This is a headline</h3>
        <p class="card-text">...</p>
        <div class="card-table">
            <table class="table mb-0">
                ...
            </table>
        </div>          
    </div>
</div>