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
<bs-card>
<bs-card-header>Header</bs-card-header>
<bs-card-body>
<bs-card-title>Card title</bs-card-title>
<bs-card-text>Body paragraph for the card.</bs-card-text>
</bs-card-body>
</bs-card>
import { Component } from '@angular/core';
import {
BsCardComponent,
BsCardHeaderComponent,
BsCardBodyComponent,
BsCardTitleComponent,
BsCardTextComponent,
} from '@mintplayer/ng-bootstrap/card';
@Component({
selector: 'my-card-demo',
templateUrl: './my-card-demo.component.html',
imports: [
BsCardComponent,
BsCardHeaderComponent,
BsCardBodyComponent,
BsCardTitleComponent,
BsCardTextComponent,
],
})
export class MyCardDemoComponent {}
Simple card
<bs-card>
<bs-card-body>
<bs-card-title>Simple card</bs-card-title>
<bs-card-text>Basic card with only body content.</bs-card-text>
</bs-card-body>
</bs-card>
Header, body, footer
<bs-card>
<bs-card-header>Header</bs-card-header>
<bs-card-body>
<bs-card-title>Body title</bs-card-title>
<bs-card-subtitle>A subtitle</bs-card-subtitle>
<bs-card-text>Body paragraph below the heading pair.</bs-card-text>
<bs-card-link href="#">Link 1</bs-card-link>
<bs-card-link href="#">Link 2</bs-card-link>
</bs-card-body>
<bs-card-footer>Footer</bs-card-footer>
</bs-card>
Nested card
<bs-card style="max-width: 24rem;">
<bs-card-body>
<bs-card-title>Outer card</bs-card-title>
<bs-card-text>A card can be nested inside another card's body:</bs-card-text>
<bs-card>
<bs-card-body>
<bs-card-title>Inner card</bs-card-title>
<bs-card-text>This card is slotted into the outer card's body.</bs-card-text>
</bs-card-body>
</bs-card>
</bs-card-body>
</bs-card>
With list-group
<bs-card>
<bs-card-header>List of elements</bs-card-header>
<bs-list-group [flush]="true">
<bs-list-group-item>Cras justo odio</bs-list-group-item>
<bs-list-group-item>Dapibus ac facilisis in</bs-list-group-item>
<bs-list-group-item>Morbi leo risus</bs-list-group-item>
</bs-list-group>
<bs-card-footer>Footer below the list</bs-card-footer>
</bs-card>
Image at the top
<bs-card style="max-width: 320px;">
<bs-card-img position="top" [src]="imageUrl" alt="placeholder"></bs-card-img>
<bs-card-body>
<bs-card-title>Top image</bs-card-title>
<bs-card-text>Text below the image, inside the body.</bs-card-text>
</bs-card-body>
</bs-card>
Image at the bottom
<bs-card style="max-width: 320px;">
<bs-card-body>
<bs-card-title>Bottom image</bs-card-title>
<bs-card-text>Text above the image, inside the body.</bs-card-text>
</bs-card-body>
<bs-card-img position="bottom" [src]="imageUrl" alt="placeholder"></bs-card-img>
</bs-card>
Image overlay
<bs-card style="max-width: 320px;">
<bs-card-img position="overlay" [src]="imageUrl" alt="background">
<bs-card-title>Overlaid title</bs-card-title>
<bs-card-text>Overlaid description.</bs-card-text>
</bs-card-img>
</bs-card>
Colour variants — filled
<bs-card color="primary">
<bs-card-body>
<bs-card-title>primary</bs-card-title>
<bs-card-text>text-bg-primary applied to the host.</bs-card-text>
</bs-card-body>
</bs-card>
Colour variants — outline
<bs-card color="primary" [outline]="true">
<bs-card-body>
<bs-card-title>primary</bs-card-title>
<bs-card-text>border border-primary bg-transparent applied to the host.</bs-card-text>
</bs-card-body>
</bs-card>
Header / footer colours independent of the root
<bs-card>
<bs-card-header color="dark">Dark header</bs-card-header>
<bs-card-body>
<bs-card-text>Card root has no colour; header and footer each carry their own.</bs-card-text>
</bs-card-body>
<bs-card-footer color="success">Success footer</bs-card-footer>
</bs-card>
Card group
<bs-card-group>
<bs-card>
<bs-card-img position="top" [src]="imageUrl" alt=""></bs-card-img>
<bs-card-body>
<bs-card-title>Group A</bs-card-title>
<bs-card-text>First card in the group.</bs-card-text>
</bs-card-body>
</bs-card>
<bs-card>
<bs-card-img position="top" [src]="imageUrl" alt=""></bs-card-img>
<bs-card-body>
<bs-card-title>Group B</bs-card-title>
<bs-card-text>Second card in the group.</bs-card-text>
</bs-card-body>
</bs-card>
</bs-card-group>
Horizontal layout via bs-grid
<bs-card style="max-width: 540px;">
<bs-grid>
<div bsRow class="g-0">
<div [md]="4">
<bs-card-img position="top" [src]="imageUrl" alt=""></bs-card-img>
</div>
<div [md]="8">
<bs-card-body>
<bs-card-title>Horizontal card</bs-card-title>
<bs-card-text>Image on the left, body on the right at md and up.</bs-card-text>
</bs-card-body>
</div>
</div>
</bs-grid>
</bs-card>
Header with nav-tabs
bs-nav with variant="tabs" in a card header; click a tab to switch the body content.
<bs-card>
<bs-card-header>
<bs-nav variant="tabs" [cardHeader]="true">
@for (page of tabPages; track page) {
<bs-nav-item>
<a [class.active]="page === activeTab()" href="#"
(click)="$event.preventDefault(); activeTab.set(page)">{{ page }}</a>
</bs-nav-item>
}
</bs-nav>
</bs-card-header>
<bs-card-body>
<bs-card-title>{{ activeTab() }}</bs-card-title>
<bs-card-text>Body content for the active tab.</bs-card-text>
</bs-card-body>
</bs-card>
bs-nav ships Bootstrap's nav styles itself, so they load with the page that renders it. Import BsNavLinkDirective next to the components: it makes each item's own <a> (a routerLink too) the item's .nav-link.
import { Component, signal } from '@angular/core';
import { BsNavComponent, BsNavItemComponent, BsNavLinkDirective } from '@mintplayer/ng-bootstrap/nav';
@Component({
imports: [BsNavComponent, BsNavItemComponent, BsNavLinkDirective, …],
…
})
export class MyCardNavDemoComponent {
readonly tabPages = ['Profile', 'Activity', 'Settings'] as const;
readonly activeTab = signal<typeof this.tabPages[number]>('Profile');
}
Header with nav-pills
bs-nav with variant="pills" in a card header; click a pill to switch the body content.
<bs-card>
<bs-card-header>
<bs-nav variant="pills" [cardHeader]="true">
@for (page of pillPages; track page) {
<bs-nav-item>
<a [class.active]="page === activePill()" href="#"
(click)="$event.preventDefault(); activePill.set(page)">{{ page }}</a>
</bs-nav-item>
}
</bs-nav>
</bs-card-header>
<bs-card-body>
<bs-card-title>{{ activePill() }}</bs-card-title>
<bs-card-text>Body content for the active pill.</bs-card-text>
</bs-card-body>
</bs-card>