Card

Example

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="card" style="width: 20rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Body

The most basic configuration.

<div class="card">
    <div class="card-body">
        This is some text within a card body.
    </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 directly below .card-title. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

<div class="card" style="width: 20rem;">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <h5 class="card-subtitle">Card subtitle</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </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.

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.

<div class="card" style="width: 20rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

<div class="card" style="width: 20rem;">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
    <img src="..." class="card-img-bottom" alt="...">
</div>

<div class="card text-white" style="width: 20rem;">
    <img src="..." class="card-img" alt="...">
    <div class="card-img-overlay">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

List groups

Create lists of content in a card with a flush list group. Use .py-2 on .card-header and .card-footer if you want them to have the same size as the list items.

<div class="card" style="width: 20rem;">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
</div>

<div class="card" style="width: 20rem;">
    <div class="card-header py-2">
        Card header (with .py-2)
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-footer py-2">
        Card footer (with .py-2)
    </div>
</div>

Header and footer

The .card-title can be placed in either the .card-header or the .card-body depending on your design preferences. These examples show the .card-header placement.

<div class="card">
    <div class="card-header">
        Title in header
    </div>
    <div class="card-body">
        <h4 class="card-title">Title in body</h4>
        <p class="card-text">Text in body.</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
	<h4 class="card-title">Title in header</h4>
    </div>
    <div class="card-body">
        <h4 class="card-title">Title in body</h4>
        <p class="card-text">Text in body.</p>
    </div>
</div>

<div class="card mb-0">
    <div class="card-header">
        Title in header
    </div>
    <div class="card-body">
        <h4 class="card-title">Title in body</h4>
        <p class="card-text">Text in body.</p>
    </div>
    <div class="card-footer">
        Text in footer
    </div>
</div>

Navigation

Add some navigation to a card’s header with the nav components, .card-header-tabs and .card-header-pills.

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" aria-current="true" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h3 class="card-title">Special title treatment</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
            <li class="nav-item">
                <a class="nav-link active" aria-current="true" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <h3 class="card-title">Special title treatment</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Styling

Use the .bg-* and .text-* classes to style the cards.

<div class="card bg-primary text-white">
    <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">Card text.</p>
    </div>
</div>

<div class="card bg-beets text-white">
    <div class="card-header">
        Card header
    </div>
    <div class="card-body">
        <p class="card-text">Card text.</p>
    </div>
    <div class="card-footer">
        Card footer
    </div>
</div>

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

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 title

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

Last updated 3 mins ago

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

<div class="card-group">
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
        <h3 class="card-title">Card title</h3>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">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.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

When using card groups with footers, their content will automatically line up.

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 title

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

Last updated 3 mins ago

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

<div class="card-group">
    <div class="card mb-0">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
        <div class="card-footer">
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
        <div class="card mb-0">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card mb-0">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h3 class="card-title">Card title</h3>
            <p class="card-text">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.</p>
        </div>
        <div class="card-footer">
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

Grid cards

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
        </div>
    </div>
</div>

When you need equal height, add .h-100 to the cards.

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is quite a fair bit longer and the text just goes on and on without making any sense.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a short card.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
               <h3 class="card-title">Card title</h3>
               <p class="card-text">This is a medium long card with supporting text below as a natural lead-in to additional content.</p>
            </div>
        </div>
    </div>
</div>

Just like with card groups, card footers will automatically line up.

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is quite a fair bit longer and the text just goes on and on without making any sense.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a short card.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card h-100">
            <div class="card-body">
                <h3 class="card-title">Card title</h3>
                <p class="card-text">This is a medium long card with supporting text below as a natural lead-in to additional content.</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Last updated 3 mins ago</small>
            </div>
        </div>
    </div>
</div>