Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap Documentation

Examples

...
Business 08th December
let's work together all arrived

There are endless ways to create a some ways to have a business.

read more
...
By: Rona Lewis
17
copy

<div class="row">
    <div class="col-12 col-md-8 col-lg-10 col-xl-5">
        <div class="card border-0 rounded-lg shadow">
            <img src="../html/assets/img/blog/blog-05.jpg" class="card-img-top" alt="...">
            <div class="card-body p-5">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <a href="#!" class="label font-weight-bold">Business</a>
                    <span class="small">08th December</span>
                </div>

                <div class="border-bottom border-light mb-4 pb-4">
                    <a href="#!"><h5>let's work together all arrived</h5></a>
                    <p>There are endless ways to create a some ways to have a business.</p>
                    <a href="#!">read more</a>
                </div>

                <div class="d-flex justify-content-between align-items-center">

                    <div class="d-flex align-items-center">
                        <img src="../html/assets/img/testmonials/t-4.jpg" class="rounded-circle sm-avatar" alt="..." />

                        <div class="ml-3">
                            <span class="small"><span class="font-weight-bold">By: </span>Rona Lewis</span>
                        </div>
                    </div>

                    <a href="#!" class="bg-danger-10 py-1 px-2 rounded-pill text-danger small">
                        <i class="fas fa-heart mr-1"></i>17
                    </a>

                </div>

            </div>
        </div>
    </div>
</div>

Titles, text, and links

June 10, 2019

Answer the questions everyone is asking

With energies to unlock more opportunities for you.

Web Design
...

Lenthi Miloler

copy

<div class="card shadow-sm border-0 transition-hover h-100">
    <div class="card-body bg-white p-5">
        <div class="small d-block text-muted mb-2">
            <span class="mb-3">June 10, 2019</span>
        </div>
        <h3 class="h5">
                                    <a href="#!" class="text-dark">Answer the questions everyone is asking</a>
                                </h3>

        <p>With energies to unlock more opportunities for you.</p>

        <a href="#!" class="badge badge-pill badge-primary-soft">Web Design</a>

    </div>
    <div class="card-footer bg-white border-top border-light py-4 px-0 mx-5">
        <div class="media align-items-center">
            <div class="sm-avatar mr-3">
                <img class="img-fluid rounded-circle" src="../html/assets/img/avatar/avatar-19.jpg" alt="...">
            </div>
            <div class="media-body">
                <h4 class="display-10 mb-0">
                                            <a href="#!" class="text-dark">Lenthi Miloler</a>
                                        </h4>
            </div>
        </div>

    </div>
</div>

Card groups

Company

$ 36 / per month

Complete access

Similarly pay pricing payment

  • No hidden fees
  • Everything you need
  • Feature update access
  • 24/7 customer support
copy

<div class="card-group">

    <div class="card border-light">
        <div class="card-body shadow-light text-center p-5 p-lg-6">
            <h4>Company</h4>
            <div class="d-block mb-3">
                <span class="text-primary h4 align-top">$</span>
                <span class="display-2 text-primary font-weight-bold">36</span>
                <span class="text-primary font-weight-bold">/ per month</span>
            </div>
            <p class="mb-0">Complete access</p>
            <p class="mb-0">Similarly pay pricing payment</p>
        </div>
    </div>

    <div class="card border-light mb-0">
        <div class="card-body shadow-light p-5 p-lg-6">
            <ul class="list-unstyled mb-5 pb-0">
                <li class="py-2">
                    <div class="d-flex">
                        <span class="list-style1 mr-3">
                                                    <i class="fas fa-check"></i>
                                                </span> No hidden fees
                    </div>
                </li>
                <li class="py-2">
                    <div class="d-flex">
                        <span class="list-style1 mr-3">
                                                    <i class="fas fa-check"></i>
                                                </span> Everything you need
                    </div>
                </li>
                <li class="py-2">
                    <div class="d-flex">
                        <span class="list-style1 mr-3">
                                                    <i class="fas fa-check"></i>
                                                </span> Feature update access
                    </div>
                </li>
                <li class="pt-2">
                    <div class="d-flex">
                        <span class="list-style1 mr-3">
                                                    <i class="fas fa-check"></i>
                                                </span> 24/7 customer support
                    </div>
                </li>
            </ul>
            <button class="btn btn-primary shadow-none mr-2 my-1 my-md-0">Schedule a Demo</button>
            <button type="button" class="btn btn-warning shadow-none my-1 my-md-0">Try Now</button>
        </div>
    </div>

</div>