Cards | Pusat Teknologi Informasi dan Pangkalan Data Universitas Islam Negeri Syarif Hidayatullah Jakarta

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="card" style="width: 18rem;">
    <img class="card-img-top" src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg" alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</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="btn btn-primary">Go somewhere</a>
    </div>
</div>

Title, 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="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <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.

<div class="card" style="width: 18rem;">
    <img class="card-img-top"
        src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg"
        alt="Card image cap">
    <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>

List groups

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<div class="card" style="width: 18rem;">
    <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>

Featured

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

<div class="card" style="width: 18rem;">
    <div class="card-header">
        Featured
    </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>

Kitchen sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

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

Card link Another link

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg" alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</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>
    </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-body">
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Header & Footer

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

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <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>

Card headers can be styled by adding .card-header to <h*> elements.

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card">
    <div class="card-body">
    <h5 class="card-header">Featured</h5>
        <h5 class="card-title">Special title treatment</h5>
        <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>

Quote

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

Someone famous in Source Title

<div class="card">
    <div class="card-header">
        Quote
    </div>
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                erat a ante.</p>
            <footer class="blockquote-footer">Someone famous in <cite
                    title="Source Title">Source Title</cite></footer>
        </blockquote>
    </div>
</div>

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

<div class="card text-center">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text text-center">With supporting text below as a natural lead-in to
            additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. Using the grid, wrap cards in columns and rows as needed.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <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>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <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>
</div>

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button

<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to
            additional content.</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>

<div class="card w-50">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to
            additional content.</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card w-50" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <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 w-50" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text text-center">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-end w-50" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text text-end">With supporting text below as a natural lead-in to
            additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Navigations

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

Home

With supporting text below as a natural lead-in to additional content.

Go somewhere

Profile

With supporting text below as a natural lead-in to additional content.

Go somewhere

Contact

With supporting text below as a natural lead-in to additional content.

Go somewhere

<div class="card text-center">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab"
                    data-bs-target="#home" type="button" role="tab" aria-controls="home"
                    aria-selected="true">Home</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab"
                    data-bs-target="#profile" type="button" role="tab"
                    aria-controls="profile" aria-selected="false">Profile</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab"
                    data-bs-target="#contact" type="button" role="tab"
                    aria-controls="contact" aria-selected="false">Contact</button>
            </li>
        </ul>
    </div>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel"
            aria-labelledby="home-tab">
            <div class="card-body">
                <h5 class="card-title">Home</h5>
                <p class="card-text text-center">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="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <div class="card-body">
                <h5 class="card-title">Profile</h5>
                <p class="card-text text-center">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="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <div class="card-body">
                <h5 class="card-title">Contact</h5>
                <p class="card-text text-center">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>
</div>

Cards style

Cards include various options for customizing their backgrounds, borders, and color.

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Primary card title</h5>
        <p class="card-text text-white">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 text-white bg-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Secondary card title</h5>
        <p class="card-text text-white">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 text-white bg-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Success card title</h5>
        <p class="card-text text-white">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 text-white bg-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Danger card title</h5>
        <p class="card-text text-white">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 text-white bg-warning mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Warning card title</h5>
        <p class="card-text text-white">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 text-white bg-info mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Info card title</h5>
        <p class="card-text text-white">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 bg-light mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Light card title</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>
    </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title text-white">Dark card title</h5>
        <p class="card-text text-white">Some quick example text to build on the card title and make
            up the bulk of the card's content.</p>
    </div>
</div>

Use border utilities to change just the border-color of a card. Note that you can put .text-{color} classes on the parent .card or a subset of the card’s contents as shown below.

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Light card title

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

Header

Dark card title

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

<div class="card border-primary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
        <h5 class="card-title text-primary">Primary card title</h5>
        <p class="card-text text-primary">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 border-secondary mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
        <h5 class="card-title text-secondary">Secondary card title</h5>
        <p class="card-text text-secondary">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 border-success mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
        <h5 class="card-title text-success">Success card title</h5>
        <p class="card-text text-success">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 border-danger mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
        <h5 class="card-title text-danger">Danger card title</h5>
        <p class="card-text text-danger">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 border-warning mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-warning">
        <h5 class="card-title text-warning">Warning card title</h5>
        <p class="card-text text-warning">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 border-info mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-info">
        <h5 class="card-title text-info">Info card title</h5>
        <p class="card-text text-info">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 border-light mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
        <h5 class="card-title">Light card title</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>
    </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body text-dark">
        <h5 class="card-title text-dark">Dark card title</h5>
        <p class="card-text text-dark">Some quick example text to build on the card title and make
            up the bulk of the card's content.</p>
    </div>
</div>

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header

Success card title

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

Footer

<div class="card border-success mb-3" style="max-width: 18rem;">
    <div class="card-header bg-transparent border-success">Header</div>
    <div class="card-body text-success">
        <h5 class="card-title text-success">Success card title</h5>
        <p class="card-text text-success">Some quick example text to build on the card title and make
            up the bulk of the card's content.</p>
    </div>
    <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Card layout

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.

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.

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.

Card title

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

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.

<div class="row row-cols-1 row-cols-md-2 g-4">
    <div class="col">
        <div class="card">
            <img src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg"
                class="card-img-top" alt="image1">
            <div class="card-body">
                                                <h5 class="card-title">Card title</h5>
                <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">
            <img src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg"
                class="card-img-top" alt="image2">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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">
            <img src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg"
                class="card-img-top" alt="image3">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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">
            <img src="https://asset.uinjkt.ac.id/uploads/GOsFIzmB/2024/04/pic-default1.jpg"
                class="card-img-top" alt="image4">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <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>