Cards

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

Basic usage

Lorem ipsum dolor sit amet

Proin venttdio nunc, id fringilla augue luctus et. Mauris condimentum vehicula magna a vehicula. Cras ornare, ligula id semper fringilla, ex turpis.


<div class="card d-block border-0">
    <img class="card-img-top" src="../assets/img/img-38.jpg" alt="">
    <div class="card-body">
        <h6 class="mb-3 text-uppercase">Lorem ipsum dolor sit amet</h6>
        <p class="card-text fs--1">Proin venttdio nunc, id fringilla augue luctus et. Mauris condimentum vehicula magna a vehicula. Cras ornare, ligula id semper fringilla, ex turpis.</p>
        <a href="#" class="h6 fs--1 fw-bold text-uppercase text-primary float-end">View more<i class="zmdi zmdi-chevron-right ps-4"></i></a>
    </div>
</div>

Shifted

You can add mt-neg-{value} to any elements to use negative margins. See more details in Helpers section.

Heather Peters

Designer

Donec convallis ultricies ex. Etiam id luctus magna, eu tempor ipsum. Praesent eu pellentesque mauris. Aliquam non pellentesque eros.


<div class="card">
    <div class="px-3 mt-neg-4">
        <img src="../assets/img/profiles/profile-06.jpg" class="card-img" alt="">
    </div>
    <div class="card-body">
        <h6 class="card-title mb-0 text-uppercase">Heather Peters</h6>
        <p class="card-text mb-3 fs--1 text-primary">Designer</p>
        <p class="card-text fs--1">Donec convallis ultricies ex. Etiam id luctus magna, eu tempor ipsum. Praesent eu pellentesque mauris. Aliquam non pellentesque eros.</p>
    </div>
</div>

For more Details see Bootstrap Cards Documentation

Basic usage
Shifted