Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the .card-block class on the .card element to consolidate your markup.

Example:

Source Code:

<div class="card card-default"> <img class="card-img-top img-responsive" src="/sample/images/background_2.jpg" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p>Some example text to build on the card title and make up the bulk of the card's content. <a href="">This is a sample link</a></p> <a href="#" class="btn btn-default">Button</a> </div> </div>

Card Variations:

As with most components, cards can be extended to display with a different style. Apply one of the following supported class names to the .card div:

• .card-default (recommended)
• .card-understated
• .card-overstated
• .card-standout
• .card-primary
• .card-danger
• .card-inverted

Example using .card-primary

Source Code:

<div class="card card-primary"> <div class="card-block"> <h4 class="card-title">Card title</h4> <p>Some example text to build on the card title and make up the bulk of the card's content. <a href="">This is a sample link</a></p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

Card with Header:

Source Code:

<div class="card card-default"> <div class="card-header"> Featured </div> <div class="card-block"> <p>Some example text to build on the card title and make up the bulk of the card's content. <a href="">This is a sample link</a></p> <a href="#" class="btn btn-default">Button</a> </div> </div>

Card with footer:

Source Code:

<div class="card card-default"> <div class="card-block"> <p>Some example text to build on the card title and make up the bulk of the card's content. <a href="">This is a sample link</a></p> <a href="#" class="btn btn-default">Button</a> </div> <div class="card-footer"> Footer </div> </div>