Basic Card


Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Compellingly expedite bricks-and-clicks niche markets through user-centric interfaces. Efficiently evisculate intermandated platforms after cross-media markets.

With title

h4.card-title

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Title size

h3.card-title

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Title in header

.card-header > .card-title

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Without divider

.no-border

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

bold title

.card-title-bold

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Title and description More description

<small>

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Title and sidetitle More description

.sidetitle

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Title and subtitle More description below the card title

.subtitle

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Bordered card

.card-bordered

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Shadowed card

.card-shadowed

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Shadow on hover card

.card-hover-shadow

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Transparent card

.card-transparent

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card footer

footer.card-footer

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

A footer for more content inside

Card footer

footer.card-footer

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card footer

footer.card-footer

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card footer

footer.card-footer

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card footer

footer.card-footer

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Advanced Card


Card controls

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card slided up

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card options

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Card reload

URL

Specify the url that has to be load and replace .card-body content inside the href attribute of the <a> tag.

Spinner

Insert your desire spinner inside a .card-loading. The spinner shows in center of the card by default. Use .align-self-start and .align-self-end top change its place to top or bottom of the card respectively.

Icon

Other loader icon suggestions are as follow:

Card reload sample

Energistically develop bleeding-edge systems with wireless benefits. Professionally re-engineer distinctive synergy via highly efficient vortals. Continually unleash professional e-tailers for sticky information. Seamlessly productivate cooperative processes for integrated channels. Collaboratively synergize enabled niche markets without.

Card reload sample

Energistically develop bleeding-edge systems with wireless benefits. Professionally re-engineer distinctive synergy via highly efficient vortals. Continually unleash professional e-tailers for sticky information. Seamlessly productivate cooperative processes for integrated channels. Collaboratively synergize enabled niche markets without.

Card reload sample

Energistically develop bleeding-edge systems with wireless benefits. Professionally re-engineer distinctive synergy via highly efficient vortals. Continually unleash professional e-tailers for sticky information. Seamlessly productivate cooperative processes for integrated channels. Collaboratively synergize enabled niche markets without.

Card reload sample

Energistically develop bleeding-edge systems with wireless benefits. Professionally re-engineer distinctive synergy via highly efficient vortals. Continually unleash professional e-tailers for sticky information. Seamlessly productivate cooperative processes for integrated channels. Collaboratively synergize enabled niche markets without.

Scrollable

Wrao the content inside a .card-body.scrollable and give it a height.

Proactively streamline interdependent partnerships rather than inexpensive functionalities. Assertively incentivize one-to-one partnerships before interactive functionalities. Credibly incubate end-to-end solutions before adaptive imperatives. Holisticly implement value-added e-business and fully researched "outside the box" thinking. Assertively synergize quality results without ethical processes.

Intrinsicly redefine 24/365 ideas through enterprise-wide web-readiness. Compellingly cultivate highly efficient partnerships after integrated e-commerce. Monotonectally scale viral technology vis-a-vis virtual alignments. Competently empower optimal process improvements for sustainable "outside the.

With alert

Credibly harness multidisciplinary ideas via alternative e-commerce.

With table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.
Globally customize virtual human capital with high-payoff supply chains. Credibly fabricate tactical alignments with magnetic interfaces. Dynamically visualize revolutionary imperatives and enterprise portals. Quickly communicate distributed interfaces via unique technology. Proactively maximize multidisciplinary products vis-a-vis.
Progressively redefine business resources via state of the art convergence. Rapidiously monetize virtual methods of empowerment without professional bandwidth. Competently fashion user friendly action items via magnetic mindshare. Dynamically brand client-centered strategic theme areas for.
Monotonectally leverage existing B2B supply chains whereas user-centric potentialities. Continually develop team building e-services with business channels. Continually productivate fully tested metrics after client-focused architectures. Dynamically promote efficient systems via user-centric manufactured products. Rapidiously orchestrate.
Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.
Globally customize virtual human capital with high-payoff supply chains. Credibly fabricate tactical alignments with magnetic interfaces. Dynamically visualize revolutionary imperatives and enterprise portals. Quickly communicate distributed interfaces via unique technology. Proactively maximize multidisciplinary products vis-a-vis.
Progressively redefine business resources via state of the art convergence. Rapidiously monetize virtual methods of empowerment without professional bandwidth. Competently fashion user friendly action items via magnetic mindshare. Dynamically brand client-centered strategic theme areas for.
Monotonectally leverage existing B2B supply chains whereas user-centric potentialities. Continually develop team building e-services with business channels. Continually productivate fully tested metrics after client-focused architectures. Dynamically promote efficient systems via user-centric manufactured products. Rapidiously orchestrate.
Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.
Globally customize virtual human capital with high-payoff supply chains. Credibly fabricate tactical alignments with magnetic interfaces. Dynamically visualize revolutionary imperatives and enterprise portals. Quickly communicate distributed interfaces via unique technology. Proactively maximize multidisciplinary products vis-a-vis.
Progressively redefine business resources via state of the art convergence. Rapidiously monetize virtual methods of empowerment without professional bandwidth. Competently fashion user friendly action items via magnetic mindshare. Dynamically brand client-centered strategic theme areas for.
Monotonectally leverage existing B2B supply chains whereas user-centric potentialities. Continually develop team building e-services with business channels. Continually productivate fully tested metrics after client-focused architectures. Dynamically promote efficient systems via user-centric manufactured products. Rapidiously orchestrate.

Card button

Click here

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users.

Card progress

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.

Card switch

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.

Card search

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.

Card pagination

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences.

Multi elements

Efficiently drive economically sound paradigms without orthogonal benefits. Assertively harness exceptional applications for resource sucking experiences. Credibly supply exceptional e-markets after process-centric interfaces. Rapidiously incubate end-to-end paradigms whereas team driven users. Uniquely productivate innovative results.

Background Color

Each card can accpet .card-* class that * is a color name. To make the color texts white, you should also add .card-inverse to the .card tag.



Primary

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Secondary Without .card-inverse

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Success

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Info

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Warning

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Danger Try other colors

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.



Pale Background Color

Each card can accpet .bg-* utility class.



Primary

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Secondary Without .card-inverse

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Success

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Info

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Warning

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Danger Try other colors

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.



Outline Cards

Each card can accpet .card-outline-* class that * is a color name.



Primary

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Secondary

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Success

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Info

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Warning

Credibly harness multidisciplinary ideas via alternative e-commerce. Intrinsicly transition interdependent best practices before resource sucking outsourcing.

Danger Try other colors





Bordery Cards

You are able to add borders to any side of a card. In some cases, you might want to have a 3px border in one side of a card. You can achieve this purpose using border utility classes.

Bordery left

.bl-3.border-primary

Try other colors

Bordery top

.bt-3.border-primary

Try other colors

Bordery bottom

.bb-3.border-primary

Try other colors

Bordery right

.br-3.border-primary

Try other colors
Card Group


Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago




Deck

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.



Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago




Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are ordered from top to bottom and left to right when wrapped in .card-columns.



Card image cap

Card title that wraps to a new line, but not in the large screens

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago