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. Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.

Note! For same height cards in a row, add .match-height class to row.

If your card doesn't have any flush content like images, feel free to put the .card-body class on the .card element to consolidate your markup.

Card Structure
                
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Special title treatment</h4>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="bx bx-minus"></i></a></li>
                                    <li><a data-action="reload"><i class="bx bx-rotate-right"></i></a></li>
                                    <li><a data-action="expand"><i class="bx bx-fullscreen"></i></a></li>
                                    <li><a data-action="close"><i class="bx bx-x"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show" aria-expanded="true">
                            <div class="card-body">
                                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                                <a href="javascript:void(0);" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                        <div class="card-footer">
                            <span class="text-muted">Frest</span>
                        </div>
                    </div>
                
            
Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.

Some card options with class name and details :

Card Options Class Description
Card image top .card-img-top Use mentioned class inside wrapper of .card to get image on top of the card.
Card Title .card-title Card titles are used by adding this class to a <h*> tag.
Card Subtitle .card-subtitle 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.
Cards Header .card-header To add header to the card.
Cards Footer .card-footer To add footer to the card.
Groups .card-group Wrap cards inside mentioned class to render cards as a single, attached element with equal width and height columns.
Decks .card-deck Card require wrapping elements: .card-deck. We use table styles for the sizing and the gutters on .card-deck.
Columns .card-columns Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are ordered from top to bottom and left to right when wrapped in .card-columns.
Image overlays .card-img-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.
Remove Card Shadow .no-card-shadow Add this class in <body> tag to hide box-shadow from all cards in whole template.

Refer following links for detailed documentation, configuration options, methods and examples:

Type URL
Bootstrap Link https://getbootstrap.com/docs/4.5/components/card/
Card Template Page https://pixinvent.com/demo/frest-clean-bootstrap-admin-dashboard-template/html/ltr/vertical-menu-template/card-basic.html