Richard Leong
Card 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.
Card title
Card subtitle
Some quick example text to build on the Card title and make up the bulk of the Card's content.
Card linkAnother linkFullscreen (extended feature)
This is an extended feature from Bootstrap Card. Add the componentCardHeaderBtn to having the following buttons the maximize or minimize the Card element
Card title
Card subtitle
Some quick example text to build on the Card title and make up the bulk of the Card's content.
Card linkAnother linkSizing
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.
Horizontal
Using a combination of grid and utility classes, Cards can be made horizontal in a mobile-friendly and responsive way.
Card Styles
Cards include various options for customizing their backgrounds, borders, and color.
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
Grid Cards
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