AppStrap.

• More Theme Elements
• Alerts
• Animations
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Flags
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Social Media Branding
• Spacers
• Tables
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks

Examples

Card are super flexible content containers which can have a header/title, image, content, footers, lists, links and more.

---

Card content

Cards support a huge array of content and define their own helper classes for content.

.card-body

This class allows you to add padding to either the whole card or blocks of content within a card. This is really useful if some content needs to stretch to the edges (like images) and some not (like text).

.card-header + .card-footer

These classes apply padding, a background colour and border radias properties to the card header or footer, useful for capping the top & bottom of a card. .card-header can also be applied directly to an h badge element to apply a similar effect.

.card-title

This simply applies a bottom margin to an item which should be considered the title of the card.

.card-text

This applies no effect on default cards and is only used when using the .card-inverse class (below).

.card-header-tabs + .card-header-pills

These classes should be applied to navigation elements should in the card header.

List groups .list-group-flush

This class allows you to include list groups within cards and have them stretch to the edge of the card.

---

Card images

Images can be added to cards either at the top, middle, bottom or even as a background image.

---

Card Content Alignment

Cards support the standard text alignment utilities: .text-BREAKPOINT-ALIGN

---

Card Ribbons

You can apply a ribbon to the corners on cards which can be useful to highlight a specific card.

HTML: View code example

<div class="card-ribbon card-ribbon-VERTICAL-ALIGN card-ribbon-HORIZONTAL-ALIGN ANY-HELPER-CLASSES">SHORT TEXT</div>

.card-ribbon-VERTICAL-ALIGN can be top or bottom, card-ribbon-HORIZONTAL-ALIGN can be left or right.

You can use the colour utilities to control the background colour & text colour of the ribbons. NOTE: Ribbons do not work with "Cards Columns" below.

---

Card Styles

Background colours

Apply solid background colours to cards, use in conjunction with the card-inverse or the text colour utilities.

Outline colours

Apply an outline colours to cards with these classes.

Background Shadow

The bg-shadow class can be used on cards to give a background shadow effect.

---

Clickable Cards

To make a whole element or card clickable to a url, simply add data-url="URL" and it will make the whole element or card act link a link.

---

Cards Grids

Cards can be laid out using the grid system built into Bootstrap.

---

Cards Groups

Groups will force all cards to be displayed on the same row as well as be the same width and height.

Simply wrap your card elements within a .card-group wrapper like this:
<div class="card-group">...cards.....</div>

With aligned footers

If cards contain .card-footer elements they will automatically get pulled to the bottom and aligned with the other card footers.

---

Cards Decks

Card decks work much like groups expect the cards are not attached to each other.

Card decks require 2 wrapper elements like this:
<div class="card-deck-wrapper"><div class="card-deck">...cards.....</div></div>

With aligned footers

Like card groups if cards contain .card-footer elements they will automatically get pulled to the bottom and aligned with the other card footers.

---

Cards Columns

Cards can be set to display in Masonry-like columns just by adding a wrapper with the class .card-columns .