Header & Footer

Here I've also moved the .card-body to a new <div> inside the card. I did this to allow the card header to line up flush against the card border (the .card-body has padding which I don't want). More on flush content below.

HTML Headers

You can also apply the .card-header class to any HTML header element (i.e. <h1> - <h6> tags).

To create flush content, don't put that content inside a .card-body (because it has padding).

Instead, remove the .card-body from the outer <div> and nest it inside (in its own <div>).

Now you can place the (flush) content outside the .card-body (but still inside the .card). This effectively removes the padding — allowing the content to line up flush against the sides of the card. You can have multiple .card-body elements if required.

Note that when using content with a fixed width (such as images), you may need to specify the width of the card to match that of the content.

Top & Bottom

You can have content such as images line up flush with the top of the card (so that the top corners of the image fit flush with the rounded corners of the card).

To do this, apply either the .card-img-top or .card-img-bottom class to the <img> tag.