[Bootstrap - 03 Component - 06 Card] #Card #Component #Bootstrap #html #CSS

00 - About.md

A card = a flexible and extensible content container.

It includes :

• options for headers and footers
• a wide variety of content
• contextual background colors
• powerful display options

01 - the most basic example.md

Cards are built with as little markup and styles as possible, They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic card with mixed content and a fixed width.

Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.

This is easily customized with our various sizing options.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

02 - Content types.md

Cards support a wide variety of content, including images, text, list groups, links, and more.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Header and footer

Add an optional header and/or footer within a card.

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>