Bootstrap Cards

Build card-based UI blocks with headers, images, lists, and layout combinations for dashboards and content.

Introduction

In this tour we’ll look at common Bootstrap card patterns and the key Properties to configure (structure first, then style).

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

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

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

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.

Orient yourself in Properties panel

Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Button: Style and see how it fits into this area.

Button: Style

Use Style to pick the button variant (primary/secondary/outline-*, etc.). This step matters because Button: Style is part of Selection Panels Properties Btnbtnstyle, and understanding that context makes the next action easier to repeat in your own project.

tip: Prefer variants over hard-coded styles so Theme Manager can theme your UI consistently.

Button: Size

Use Size to switch between default, small, and large buttons. This step matters because Button: Size is part of Selection Panels Properties Anchorbtnsizen, and understanding that context makes the next action easier to repeat in your own project.

Button: Link

Use Link to pick where the button navigates (page/file/route). This step matters because Button: Link is part of Selection Panels Properties Anchorbtnhref, and understanding that context makes the next action easier to repeat in your own project.

Button: Label

To change the button label, edit the text content in Design View (double-click the button/link text).

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

Edit the list item content in Design View (double-click the text). Use Properties mainly for state + styling options.

List Group Item: Active

Use Active to mark the current/selected item. This step matters because List Group Item: Active is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.

tip: For consistent spacing, apply spacing utilities on the card or list container rather than every item.

List Group Item: Disabled

Use Disabled to make the item non-interactive. This step matters because List Group Item: Disabled is part of the Properties panel, and understanding that context makes the next action easier to repeat in your own project.

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

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

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.

Structure first

Build the card’s structure (header/body/footer/list-group) first, then style the correct node.

Use utilities + variants

Prefer Bootstrap utilities (m-*/p-* etc.) and variants so Theme Manager can theme consistently.

Next steps

Choose what you want to learn next.