Cards

Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.

Overview

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.

  • Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
  • Additional card with action button like dropdown on right side.
  • Card with tabs.
  • Card with buttons on top header.

Cards

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Card subtitle

Lorem ipsum dolor sit amet loreim nsectetur adipiscing elit. Fusce vel elementum eros.

Card link Another link

Card title - Bottom Line

Vestibulumin augue posuere congue.

Peneit amet, porta semper nisi. Simple card title bottom line

Card Small Descriptions

The generated Lorem Ipsum is therefore always free from repetition

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Card image cap

Card title

Vestibuluimis in faucibus orci luctus et ultrices posuere cubilia Curis ipsum in augue posuere congue.

Go somewhere
Card image cap

Card title

Faucibus orci luctus et ultrices lorem posuere cubilia Cuquis ipsum in augue posuere congue.

Go somewhere

Card title

Lorem ipusm dolro sit amet
Card image cap

Luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Card link Another link

Card title

Lorem ipusm dolro sit amet
Card image cap

Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum.

Card link Another link
Card image cap

Card title

Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Last updated 3 mins ago

Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis ipsum in augue posuere congue.

Last updated 3 mins ago

Card image cap
Card image

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

Go somewhere

Card Header and footer

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

Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ppsum in augue posuere congue.

Go somewhere
Card Footer
Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card Footer
Quote

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

Someone famous in Source Title

Card Actions

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

Card Header

Action Another action Something else here

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Header

Action Another action Something else here

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Header

CSV PDF

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card Header

Vestibulum ante ipsum orci luctus et ultrices posuere cger quis ipsum in augue posuere congue.

Card Link
Card Header

Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Card Link
Another Link
Card Header

Quisque faucibus, massa non consectetur lacininulla varius nisl, quis ornare diam nulla quis odio.

Save
Edit
Delete

Card Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components.

Etiam odio eraturabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapieestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tinci consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur titor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Donec vitae tellus sapieniam odio erat egestas sit amet risus euCurabitur scelerisque leo at lectus mollisac dictum lectus fermentuminterdum sodales metus.

Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Etiam libero metus, dapibus vel sollicitudin vel, cursus sit amet urna. Nam imperdiet sem et purus varius aliquam.

Proin pulvinar diam tempor auctor egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Donec vitae tellus sapietiam odio erat, egestas sit amet risus euabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. interdum sodales metus.

Cras risus nisi, sollicitudin eget dui eu porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Card Masonary

Cards can be organized into Masonry-like columns with just CSS by wrapping them in card-columns.

Card image cap

Card title that wraps to a new line

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 image cap

Card title

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

Last updated 3 mins ago

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

Card List Groups

Create lists of content in a card with a flush list group.

Card image cap

Kitchen Sink

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link

Kitchen Sink

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link
Another link

Card Variance

Easily display grids of images, videos, text, and more.

Card image cap
Simple figure

Give some text description

Card image cap
Hoverable figure

Give some text description

Card image cap
Clickable title

Hit the title to view details

Card image cap
Zoom action

Give some text description

Card image cap
Quick Action
Call action

Give some text description

Card image cap
Illustration
Quick Action
Figure tools

Give some text description

Card image cap
Figure description

Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.

Gadget
Quick Action
  • 2MB
Card image cap
Long title text can be place here

Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.

Social
Quick Action
  • Attachment.pdf
Card image cap
  • Image attachment
Copyright © 2018 Concept. All rights reserved. Dashboard by Colorlib.
About Support Contact Us