Cards

Card is a flexible and extensible container. It includes options for header and footer, top and bottom images, a wide variety of content, contextual background colors, and powerful display options.

Cards support a wide variety of content, including images, text, list groups, links, and more. They are extremely flexible as any of its components can be mixed and matched.

In the example below I am using Bootstrap's Grids to create two cards. I am using the following classes:

• card - This class is added to a <div> </div> element to define the start of the card.
• card-img-top and card-img-bottom - As the name suggests, these classes are used to add images to either, and/or, the top and bottom of a card.
• card-block - A card can contain multiple card-block, each of which is defined in a separate <div> </div> element. A card-block is like a subsection of a card.
• card-title & card-text - You can add a title within a card-block by adding a header element (for e.g. <h4> </h4>) and adding class card-title to it. Likewise, you can add text within a card block by adding a paragraph element (<p></p>) and adding class card-text to it.
• text-*-center - You can add classes, for e.g. text-xs-center, to center any of you text.
• btn - The last thing I use in the example below are buttons with previously discussed button classes.

WHAT IF?

A DATE NIGHT FOR YOU COULD MEAN A FUN NIGHT FOR YOUR KIDS?

NOW IT CAN!

INTRODUCTING BABYSITTING AT WORLD SPA