Structure first
Build the card’s structure (header/body/footer/list-group) first, then style the correct node.
Bootstrap Cards
Build card-based UI blocks with headers, images, lists, and layout combinations for dashboards and content.
Introduction
Section titled “Introduction”In this tour we’ll look at common Bootstrap card patterns and the key Properties to configure (structure first, then style).
Simple card
Section titled “Simple card”Cards are flexible content containers. A card can include header/body/footer sections and media, and works well for grouped content like a product, article, or settings block.
tip: Cards are often paired with grid columns; manage layout on the parent column, and styling on the card.
Card: Nested structure
Section titled “Card: Nested structure”In App Structure, note the typical layout: card → header/body/footer. Select the correct node before styling.
tip: If you want padding/spacing, select
card-body.
Card: Lists and actions
Section titled “Card: Lists and actions”Cards often contain nested components: list-groups and buttons/links inside the body. Always select the nested component to configure its own Properties.
tip: Set a good-looking default card first, then bind dynamic data into it.
Card button
Section titled “Card button”Buttons inside cards behave like any other Bootstrap button. This is where you configure variant, size, and disabled state.
tip: Buttons inside cards are still regular Bootstrap buttons—configure them like any other button.
Button: Style
Section titled “Button: Style”Use Style to pick the button variant (primary/secondary/outline-*, etc.).
tip: Prefer variants over hard-coded styles so Theme Manager can theme your UI consistently.
Button: Size
Section titled “Button: Size”Use Size to switch between default, small, and large buttons.
Button: Link
Section titled “Button: Link”Use Link to pick where the button navigates (page/file/route).
Button: Label
Section titled “Button: Label”To change the button label, edit the text content in Design View (double-click the button/link text).
Card list item
Section titled “Card list item”List groups inside cards are a common pattern for “card with selectable items”, like menus, results, and settings lists.
tip: Keep each item’s label short and scannable; put details on the destination page or in a secondary line.
List Group Item: Text
Section titled “List Group Item: Text”Edit the list item content in Design View (double-click the text). Use Properties mainly for state + styling options.
List Group Item: Active
Section titled “List Group Item: Active”Use Active to mark the current/selected item.
tip: For consistent spacing, apply spacing utilities on the card or list container rather than every item.
List Group Item: Disabled
Section titled “List Group Item: Disabled”Use Disabled to make the item non-interactive.
List Group: Parent container
Section titled “List Group: Parent container”When you need to control flush/borders/spacing, select the list-group container (parent) in App Structure instead of the item.
Wrap-up
Section titled “Wrap-up”Cards are a composition pattern: build structure first (header/body/footer/list-group), then fine-tune styling with utilities.
Next, pick a related tour or go back to the Bootstrap tours index.
Quick checklist
Section titled “Quick checklist”Before you move on, keep these rules of thumb:
- Layout belongs on the grid (row/col), not the card
- Spacing is usually utilities (m-/p-), not custom CSS
- Use App Structure to jump between container + nested elements
- Prefer variants/utilities so Theme Manager can theme consistently
tip: If you plan to bind data, design one good-looking static card first, then add repeat bindings.
Use utilities + variants
Prefer Bootstrap utilities (m-*/p-* etc.) and variants so Theme Manager can theme consistently.
Next steps
Section titled “Next steps”Choose what you want to learn next.