Card
BsCard is a flexible and extensible content container. It includes sub-component for headers, footers, and content with variety background colors, and powerful display options.
Overview
BsCard uses Boostrap CSS classes and built with as little markup and styles as possible, but still manage to deliver control and customization. Built with flexbox, it offers easy alignment and mix well with other components. A card may contains a variety of related information, such as photos, texts, and links on a single subject. Cards often used as gateway to more detailed and complex information.
<bs-card> has no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized via styles or css classes. The default div root tag can be easily changed to any other HTML element by specifying the value of tag property.
Content Title
Some quick subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 3 mins ago
Header and Footer
Additionally, you can add header or footer inside <bs-card> using <bs-card-header> or <bs-card-footer> component.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 3 mins ago
Images
The img-top-src property places image at the top of the card, and img-bottom-src property places image at the bottom of the card. Use img-top-alt or img-bottom-alt property to specify a text for the image's alt attribute.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Positioning an image
.card-img-start places an image at the left side of the card and .card-img-end places an image at the right side of the card.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Image with description
Additionally, use <bs-card-media>to add description to the image with title/subtitle. Place <bs-card-media> after opening the <bs-card>'s tag to place the image at the top of the card, or place it before closing the <bs-card>'s tag to place the image at the bottom of the card.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Styles
Background and color
<bs-card> include various options for customizing its background and color. See Reference - Color Variants for more information.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Border
Use border utilities to change just the border-color of a card. Additionally you can also put .text-{color} classes on the <bs-card> or child component as shown below.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Content Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards.
Card groups
Use .card-group to render multiple <bs-card> as a single attached element with equal width and height columns. Card groups start off stacked and use display: flex to become attached with uniform dimensions starting at the sm breakpoint.
Content 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
Content Title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card grids
Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around the <bs-card>) to show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-sm-2 splitting four cards to equal width across multiple rows, from the small breakpoint up. And when you need equal height, add .h-100 to the cards.
Content 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
Content Title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Content 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
Content Title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
CSS Variables
The component css variables inherited from Bootstrap cards css variables.
Added since v2.0.0--bs-card-spacer-y: 1rem;
--bs-card-spacer-x: 1rem;
--bs-card-title-spacer-y: 0.5rem;
--bs-card-border-width: 1px;
--bs-card-border-color: var(--bs-border-color-translucent);
--bs-card-border-radius: 0.75rem;
--bs-card-inner-border-radius: calc(0.75rem - 1px);
--bs-card-cap-padding-y: 0.5rem;
--bs-card-cap-padding-x: 1rem;
--bs-card-cap-bg: rgba(0, 0, 0, 0.03);
--bs-card-bg: #fff;
--bs-card-img-overlay-padding: 1rem;
--bs-card-group-margin: 0.75rem;BsCardMedia
Added since v2.0.4
--bs-card-media-bg: rgba(0, 0, 0, .54);
--bs-card-media-color: rgba(255, 255, 255, .8);
--bs-card-media-title-font-size: 1.5rem;
--bs-card-media-title-font-weight: 500;
--bs-card-media-subtitle-font-size: 1.125rem;
--bs-card-media-subtitle-font-weight: 300;API Reference
BsCard
BsCardHeader
The component for displaying card header.
BsCardFooter
The component for displaying card footer.
BsCardMedia
The component for displaying image with description inside a card.
BsCardBody
The container for card contents.
BsCardContent
The component for displaying text inside a card content. This component helps style consistency of text.