• Default Theme

  • Night Mode Theme

  • RTL Version

  • Horizontal Version

Epic HR
avatar
Sara Hopkins

Webdeveloper

Statistics

$545

27%

Friends

Epic HR

Documentation

Mark all as read

  • 7 New Feedback Today

    It will give a smart finishing to your site

  • New User 10:45

    I feel great! Thanks team

  • Server Warning 10:50

    Your connection is not private

  • Issue Fixed 11:05

    WE have fix all Design bug with Responsive

  • 7 New Orders 11:35

    You received a new oder from Tina.
Mark all as read
Profile Settings 6 Inbox Message
Need help? Sign out

Cards

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.

The .card element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! 
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card title</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    </div>
</div>

Advanced card

Card title

Action 1 Action 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
This is standard card footer 
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card title</h3>
        <div class="card-options">
            <a href="#" class="btn btn-primary btn-sm">Action 1</a>
            <a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
        </div>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    </div>
    <div class="card-footer">
        This is standard card footer
    </div>
</div>

Blog post card

The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the .card-img-top class. We’ve added the .d-flex .flex-column classes to the .card-body to have the author details be on the bottom of the card.

And this isn't my nose. This is a false one.

And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
avatar
Rose Bradley 3 days ago 
<div class="card">
    <a href="#"><img class="card-img-top" src="../public/assets/images/gallery/1.jpg" alt="And this isn&#39;t my nose. This is a false one."></a>
    <div class="card-body d-flex flex-column">
        <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
        <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
        <div class="d-flex align-items-center pt-5 mt-auto">
        <img class="avatar avatar-md mr-3" src="../public/assets/images/xs/avatar4.jpg"/>
        <div>
            <a href="#" class=>Rose Bradley</a>
            <small class="d-block text-muted">3 days ago</small>
        </div>
        <div class="ml-auto text-muted">
            <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
        </div>
        </div>
    </div>
</div>

Row deck

If you want to create a couple of posts next to each other, add the .row-deck class to .row—then they will all have the same height.

Short content
Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Short content
<div class="row row-cards row-deck">
<div class="col-md-4">
<div class="card">
    <div class="card-body">Short content</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
    <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
    <div class="card-body">Short content</div>
</div>
</div>
</div>

Post card with aside image

You can also add the image on the left side of the card. All you need do to is: add the .card-aside class to the element with the .card class. Then add the image in the .card-aside-column element. No worries, puffinwill automatically center it and scale to right size:

And this isn't my nose. This is a false one.

Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...
avatar
Rose Bradley 3 days ago 
<div class="card card-aside">
    <a href="#" class="card-aside-column" style="background-image: url(../public/assets/images/gallery/2.jpg)"></a>
    <div class="card-body d-flex flex-column">
    <h4><a href="#">And this isn't my nose. This is a false one.</a></h4>
    <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
    <div class="d-flex align-items-center pt-5 mt-auto">
    <img class="avatar avatar-md mr-3" src="../public/assets/images/xs/avatar4.jpg"/>
    <div>
        <a href="#" class=>Rose Bradley</a>
        <small class="d-block text-muted">3 days ago</small>
    </div>
    <div class="ml-auto text-red">
        <a href="#" class="icon d-none d-md-inline-block ml-3"><i class="fe fe-heart mr-1"></i></a>
    </div>
    </div>
    </div>
</div>

Color variations

Card status

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!

Card status on left side

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! 
<div class="row row-cards row-deck">
<div class="col-md-6">
<div class="card">
    <div class="card-status bg-purple"></div>
    <div class="card-header">
        <h3 class="card-title">Card status</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    </div>
    </div>
        </div>
        <div class="col-md-6">
            <div class="card">
    <div class="card-status card-status-left bg-blue"></div>
    <div class="card-header">
        <h3 class="card-title">Card status on left side</h3>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    </div>
</div>
</div>
</div>

Card with switch

Card with switch

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! 
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card with switch</h3>
    <div class="card-options">
        <label class="custom-switch m-0">
            <input type="checkbox" value="1" class="custom-switch-input" checked>
            <span class="custom-switch-indicator"></span>
        </label>
        </div>
    </div>
    <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
    </div>
</div>

Card with loader

Card with loader

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus! 
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Card with loader</h3>
    </div>
    <div class="card-body">
        <div class="dimmer active">
            <div class="loader"></div>
            <div class="dimmer-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
            </div>
        </div>
    </div>
</div>