Card
bs-card is a structural container with optional bs-card-header, bs-card-body, and bs-card-footer slots. The body composes from bs-card-title, bs-card-subtitle, bs-card-text, and bs-card-link; images can be slotted via bs-card-img. Colour variants are driven by [color] and [outline].
Basic usage
Simple card
Simple cardBasic card with only body content.Header, body, footer
Body titleA subtitleBody paragraph below the heading pair.Link 1Link 2Nested card
Outer cardA card can be nested inside another card's body:Inner cardThis card is slotted into the outer card's body.With list-group
Cras justo odioDapibus ac facilisis inMorbi leo risus
Image at the top
Top imageText below the image, inside the body.Image at the bottom
Bottom imageText above the image, inside the body.Image overlay
Overlaid titleOverlaid description.
Colour variants — filled
primarytext-bg-primary applied to the host.secondarytext-bg-secondary applied to the host.successtext-bg-success applied to the host.dangertext-bg-danger applied to the host.warningtext-bg-warning applied to the host.infotext-bg-info applied to the host.lighttext-bg-light applied to the host.darktext-bg-dark applied to the host.bodytext-bg-body applied to the host.whitetext-bg-white applied to the host.transparenttext-bg-transparent applied to the host.Colour variants — outline
primaryborder border-primary bg-transparent applied to the host.secondaryborder border-secondary bg-transparent applied to the host.successborder border-success bg-transparent applied to the host.dangerborder border-danger bg-transparent applied to the host.warningborder border-warning bg-transparent applied to the host.infoborder border-info bg-transparent applied to the host.lightborder border-light bg-transparent applied to the host.darkborder border-dark bg-transparent applied to the host.bodyborder border-body bg-transparent applied to the host.whiteborder border-white bg-transparent applied to the host.transparentborder border-transparent bg-transparent applied to the host.Header / footer colours independent of the root
Card root has no colour; header and footer each carry their own.Card group
Group AFirst card in the group.Group BSecond card in the group.Group CThird card in the group.Horizontal layout via bs-grid
Horizontal cardImage on the left, body on the right at md and up.
Header with nav-tabs
ProfileThe slotted <ul class="nav"> gets card-header-tabs applied; click a tab to switch the body content.Header with nav-pills
InboxThe slotted nav gets card-header-pills applied; click a pill to switch the body content.