Cards

Default Card

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. Card content can be aligned to center or right by using helper classes such as .text-center or .text-right

Card Title

Left-aligned content. Example text to build up the card content. Mauris consequat.

Button
<div class="card">
    <img src="../assets/images/ph.jpg" class="card-img-top" alt="">
    <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">...</p>
        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-body -->
</div><!-- / card -->

Card with raised image

Add .card-w-raised-img-top to the .card, .card-raised-img-top to the <img> and .text-center to the .card-body for the center text-alignment to achieve this card style.

Card - Raised image

Phasellus accumsan, neque vitae hendrerit pretium, turpis nisi mauris consequat.

<div class="card card-w-raised-img-top">
    <div class="card-body text-center">
        <img class="card-raised-img-top rounded-sm raised-sm mb-30" src="../assets/images/ph.jpg" alt="">
        <h4 class="card-title">Card - Raised image</h4>
        <p class="card-text">...</p>
    </div><!-- / card-body -->
</div><!-- / card -->

Card with raised icon

Add .w-raised-icon to the .card and wrap the icon in a <div> with .raised-icon class.

To change the size of the icon container you can add .sm-icon, .lg-icon or .xl-icon besides the .w-raised-icon class.

To change the icon size you can add sizing classes like .icon-sm, .icon-lg and .icon-xl to the .raised-icon.

Settings

Phasellus accumsan neque.

Get Started
<div class="card w-raised-icon">
    <div class="card-body">
        <div class="raised-icon bg-white circle raised">
            <i class="bi-gear text-info"></i>
        </div><!-- / raised-icon -->
        <h4 class="card-title mt-30">Settings</h4>
        <p class="card-text">Phasellus accumsan neque.</p>
        <a href="#x" class="btn btn-sm btn-info">Get Started</a>
    </div><!-- / card-body -->
</div><!-- / card -->

Card with image overlay

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

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

<div class="card dark">
    <img src="../assets/images/ph.jpg" class="card-img rounded" alt="">
    <div class="card-img-overlay overflow-hidden">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">...</p>
        <p class="card-text">...</p>
    </div><!-- / card-img-overlay -->
</div><!-- / card -->

Content Card

You can add .row > .col- inside cards to build up functional cards with more control over the content display, like the user-profile card below.

Larry Lin

UI Designer

UI Dev Team

<div class="card">
    <div class="card-body">
        <div class="row v-center">
            <div class="col-md-4 grid-item tablet-text-center tablet-top">
                <img src="../assets/images/ph-mini.jpg" alt="" class="circle p-5 b-2 border-light" style="max-width: 150px;">
            </div><!-- / column -->

            <div class="col-md-5 tablet-text-center tablet-top">
                <h4 class="card-title">Jacob G</h4>
                <p class="fs-12 mb-5 text-primary">UI Designer</p>
                <p class="fs-10 mb-0 opc-50">UI Dev Team</p>
            </div><!-- / column -->

            <div class="col-md-3 text-center">
                <div class="row">
                    <div class="col-6 col-md-12 tablet-text-right p-x-5 mb-5">
                        <a href="#x" class="btn btn-xs btn-primary btn-circle btn-icon"><i class="bi-telephone"></i></a>
                    </div><!-- / column -->

                    <div class="col-6 col-md-12 tablet-text-left p-x-5">
                        <a href="#x" class="btn btn-xs btn-primary btn-circle btn-icon"><i class="bi-envelope"></i></a>
                    </div><!-- / column -->
                </div><!-- / row -->
            </div><!-- / column -->
        </div><!-- / row -->
    </div><!-- / card-body -->
</div><!-- / card -->

Card with Dropdown

You can add dropdowns in card content, you can use .float-end on the .dropdown to position it to the right-side of the card.

Card Title

Phasellus accumsan, neque vitae hendrerit pretium, turpis nisi magna sed purus scelerisque pulvinar. Pellentesque a libero a nunc consectetur.

Button
<div class="card">
    <div class="card-body">
        <div class="dropdown float-end">
            <a href="#x" class="dropdown-toggle arrow-none card-drop p-0" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi-three-dots-vertical"></i>
            </a><!-- / dropdown-toggle -->
            <div class="dropdown-menu dropdown-menu-end">
                <a href="javascript:void(0);" class="dropdown-item">
                    <i class="bi-person mr-5"></i>
                    <span>Profile</span>
                </a><!-- / dropdown-item -->
                <a href="javascript:void(0);" class="dropdown-item">
                    <i class="bi-gear mr-5"></i>
                    <span>Settings</span>
                </a><!-- / dropdown-item -->
            </div><!-- / dropdown-menu -->
        </div><!-- / dropdown -->
        <h4 class="card-title">Card Title</h4>

        <p class="card-text">...</p>

        <a href="#x" class="btn btn-primary">Button</a>
    </div><!-- / card-body -->
</div><!-- / card -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav