Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. 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.

...
Card title

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

Go somewhere 

<div class=" mt-6">
<div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
<svg class="object-cover w-full h-48" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false">
    <title>Placeholder</title>
    <rect width="100%" height="100%" fill="#868e96"></rect><text x="40%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="px-6 py-4">
    <h5 class="mb-3 text-xl font-semibold text-black">Card title</h5>
    <p class="mb-4 text-gray-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="inline-flex justify-center px-6 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:shadow-lg hover:bg-blue-600 ">Go Somewhere</a>
</div>
</div>
</div>

Content types

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

Body

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

This is some text within a card body. 

<div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg border border-white dark:border-secondary-800">
<div class="p-6 pb-0 text-black dark:text-secondary-600 font-medium text-2xl">Featured</div>
<div class="px-6 py-4">
<h5 class="mb-3 text-xl font-medium text-black dark:text-secondary-600">Card
title</h5>
<p class="mb-4 text-secondary-600">Some quick example text to build on the
card title and make up the bulk of the card's content.</p>
<a href="#"
class="inline-flex justify-center px-6 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:shadow-lg hover:bg-blue-600">Go
Somewhere</a>

</div>
<div class="p-6 text-secondary-600 border-t border-white dark:border-secondary-800">2 days ago</div>
</div>

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title
Card subtitle

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

Card link Another link 

<div class=" mt-6">
<div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
<svg class="object-cover w-full h-48" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false">
    <title>Placeholder</title>
    <rect width="100%" height="100%" fill="#868e96"></rect><text x="40%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="px-6 py-4">
    <h5 class="mb-3 text-xl font-semibold text-black">Card title</h5>
    <p class="mb-4 text-gray-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="inline-flex justify-center px-6 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:shadow-lg hover:bg-blue-600 ">Go Somewhere</a>
</div>
</div>
</div>

Images

.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.

...

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




<div class=" mt-6">
    <div class="max-w-xs mb-0 overflow-hidden rounded-lg shadow-lg">
    <div class="px-6 py-4">
        <h5 class="mb-3 text-xl font-semibold text-black">Card title</h5>
        <p class="mb-4 text-gray-600">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <ul>
        <li class="px-4 py-2 border-b">An item</li>
        <li class="px-4 py-2 border-b">A second item</li>
        <li class="px-4 py-2 ">A third item</li>
    </ul>
    <div class="px-6 py-4">
        <a href="#" class="text-blue-500">Card link</a>
        <a href="#" class="ml-6 text-blue-500">Another link</a>
    </div>
    </div>
</div>

List groups

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

  • An item
  • A second item
  • A third item



<div>
    <ul>
        <li class="px-4 py-2 border-b">An item</li>
        <li class="px-4 py-2 border-b">A second item</li>
        <li class="px-4 py-2 ">A third item</li>
    </ul>
    <div class="px-6 py-4">
        <a href="#" class="text-blue-500">Card link</a>
        <a href="#" class="ml-6 text-blue-500">Another link</a>
    </div>
</div>
Featured
  • An item
  • A second item
  • A third item



<div>
    <ul>
        <li class="px-4 py-2 border-b">An item</li>
        <li class="px-4 py-2 border-b">A second item</li>
        <li class="px-4 py-2 ">A third item</li>
    </ul>
    <div class="px-6 py-4">
        <a href="#" class="text-blue-500">Card link</a>
        <a href="#" class="ml-6 text-blue-500">Another link</a>
    </div>
</div>
  • An item
  • A second item
  • A third item
Card footer 



<div>
    <ul>
        <li class="px-4 py-2 border-b">An item</li>
        <li class="px-4 py-2 border-b">A second item</li>
        <li class="px-4 py-2 ">A third item</li>
    </ul>
    <div class="px-6 py-4">
        <a href="#" class="text-blue-500">Card link</a>
        <a href="#" class="ml-6 text-blue-500">Another link</a>
    </div>
</div>
Previous Next