Widget Boxes page header description goes here...
Basic Usage
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for the full list of options.
Hover View Icon
This feature enhances the Bootstrap card by showing an action icon when the user hovers
over the card. Place the icon inside the .card and use CSS hover effects
to reveal it, providing quick access to actions like view, edit, or share without
cluttering the card layout.
with Dropdown Menu
This feature extends the Bootstrap card by adding a dropdown menu inside the card header.
Use the .dropdown component with .card-header to provide
additional actions or options without cluttering the card content.
Card title
with Radio Button
This feature extends the Bootstrap card by placing button-style radio options inside
the card header. Use the .btn-check input with a corresponding
.btn label to create toggleable radio buttons that fit neatly within
the .card-header.
Card title
with Progress Bar
This feature extends the Bootstrap card by placing a progress bar inside the card header.
Combine the .progress component with .card-header to visually
indicate task completion or status directly on the card.
Card title
with Badge
This feature extends the Bootstrap card by adding a badge element inside the card header.
Use the .badge component with .card-header to display counts,
labels, or status indicators in a compact and visually clear way.
with Alert Box
This feature extends the Bootstrap card by placing an alert component inside the card body.
Use the .alert classes within .card to display important messages,
warnings, or status updates directly in the card content area.
with Scrollbar
This feature extends the Bootstrap card by integrating a custom scrollbar plugin for
smoother scrolling and a more polished look. Apply the plugin to the
.card-body to handle long content elegantly, with support for styled
scrollbars, better performance, and cross-browser consistency.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed enim arcu. Ut posuere in ligula quis ultricies. In in justo turpis. Donec ut dui at massa gravida interdum nec vitae justo. Quisque ullamcorper vehicula dictum. Nullam hendrerit interdum eleifend. Aenean luctus sed arcu laoreet scelerisque. Vivamus non ullamcorper mauris, id sagittis lorem. Proin tincidunt mauris et dolor mattis imperdiet. Sed facilisis mattis diam elementum adipiscing.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ante velit, pretium non nisi a, egestas placerat diam. Nullam aliquet iaculis ultricies. Aliquam volutpat, sapien quis volutpat elementum, ligula purus auctor diam, at vestibulum nulla augue vel purus. Praesent ac nisl a magna tincidunt interdum sed in turpis. Maecenas nec condimentum risus. In congue pretium est, eget euismod tortor ornare quis.
Praesent eu ultrices justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras mattis ipsum quis sapien consectetur fringilla. Etiam sagittis sem tempus purus elementum, vitae pretium sapien porta. Curabitur iaculis ante ut aliquam luctus. Vivamus ullamcorper blandit imperdiet. Ut egestas, orci id rhoncus cursus, orci risus scelerisque enim, eget mattis eros lacus quis ligula. Vivamus ullamcorper urna eget hendrerit laoreet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi accumsan velit dolor. Donec convallis eleifend magna, at euismod tellus convallis a. Curabitur in nisi dolor. Cras viverra scelerisque orci, sed interdum ligula volutpat non. Nunc eu enim ac neque tempor feugiat. Duis posuere lacus non magna eleifend, non dictum sem feugiat. Duis eleifend condimentum pulvinar.
with Tabs
This feature extends the Bootstrap card by placing navigation tabs inside the card
header. Use .nav-tabs within .card-header to switch between
multiple card body sections, keeping related content organized and accessible without
leaving the card layout.
Card title
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
Sizing
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereImages
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
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
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
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
Card Styles
Cards include various options for customizing their backgrounds, borders, and color.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
Card Grid
Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
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
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago
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
Card Columns
In v5, cards can be organized into Masonry-like columns with masonry javascript included.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has a regular title and short paragraphy of text below it.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.
Last updated 3 mins ago