0
# Content Components
1

2
Content display components for cards, tables, alerts, badges and media content.
3

4
## Capabilities
5

6
### Alert
7

8
Alert component for displaying contextual feedback messages.
9

10
```typescript { .api }
11
/**
12
 * Alert component for contextual messages
13
 * @param variant - Alert color variant
14
 * @param dismissible - Allow dismissal
15
 * @param onClose - Close handler
16
 * @param show - Show/hide state
17
 * @param closeLabel - Close button label
18
 */
19
function Alert(props: AlertProps): JSX.Element;
20

21
interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
22
  /** Alert color variant */
23
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
24
  /** Allow dismissal */
25
  dismissible?: boolean;
26
  /** Close handler */
27
  onClose?: () => void;
28
  /** Show/hide state */
29
  show?: boolean;
30
  /** Close button label */
31
  closeLabel?: string;
32
  /** Transition component */
33
  transition?: boolean | React.ComponentType;
34
  /** Bootstrap CSS class prefix */
35
  bsPrefix?: string;
36
}
37
```
38

39
### AlertHeading
40

41
Heading component for alerts.
42

43
```typescript { .api }
44
/**
45
 * AlertHeading component for alert headings
46
 */
47
function AlertHeading(props: AlertHeadingProps): JSX.Element;
48

49
interface AlertHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
50
  /** Component used for the root node */
51
  as?: React.ElementType;
52
  /** Bootstrap CSS class prefix */
53
  bsPrefix?: string;
54
}
55
```
56

57
### AlertLink
58

59
Link component for alerts with appropriate styling.
60

61
```typescript { .api }
62
/**
63
 * AlertLink component for links within alerts
64
 */
65
function AlertLink(props: AlertLinkProps): JSX.Element;
66

67
interface AlertLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
68
  /** Component used for the root node */
69
  as?: React.ElementType;
70
  /** Bootstrap CSS class prefix */
71
  bsPrefix?: string;
72
}
73
```
74

75
**Alert Usage Examples:**
76

77
```typescript
78
import { Alert, Button } from "react-bootstrap";
79

80
// Basic alerts
81
<Alert variant="primary">Primary alert</Alert>
82
<Alert variant="success">Success alert</Alert>
83
<Alert variant="danger">Danger alert</Alert>
84
<Alert variant="warning">Warning alert</Alert>
85

86
// Dismissible alert
87
function DismissibleAlert() {
88
  const [show, setShow] = useState(true);
89

90
  if (show) {
91
    return (
92
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
93
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
94
        <p>
95
          Change this and that and try again. Duis mollis, est non commodo
96
          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
97
          Cras mattis consectetur purus sit amet fermentum.
98
        </p>
99
      </Alert>
100
    );
101
  }
102
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
103
}
104

105
// Alert with link
106
<Alert variant="info">
107
  This is an info alert with{' '}
108
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
109
</Alert>
110
```
111

112
### Badge
113

114
Badge component for labels and counts.
115

116
```typescript { .api }
117
/**
118
 * Badge component for labels and counts
119
 * @param variant - Badge color variant
120
 * @param pill - Pill styling
121
 * @param text - Text color
122
 * @param bg - Background color
123
 */
124
function Badge(props: BadgeProps): JSX.Element;
125

126
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
127
  /** Badge color variant */
128
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
129
  /** Pill styling */
130
  pill?: boolean;
131
  /** Text color */
132
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
133
  /** Background color */
134
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
135
  /** Component used for the root node */
136
  as?: React.ElementType;
137
  /** Bootstrap CSS class prefix */
138
  bsPrefix?: string;
139
}
140
```
141

142
**Badge Usage Examples:**
143

144
```typescript
145
import { Badge, Button } from "react-bootstrap";
146

147
// Basic badges
148
<Badge bg="primary">Primary</Badge>
149
<Badge bg="secondary">Secondary</Badge>
150
<Badge bg="success">Success</Badge>
151
<Badge bg="danger">Danger</Badge>
152

153
// Pill badges
154
<Badge pill bg="primary">Primary</Badge>
155
<Badge pill bg="secondary">Secondary</Badge>
156

157
// Badges in buttons
158
<Button variant="primary">
159
  Notifications <Badge bg="secondary">4</Badge>
160
</Button>
161

162
// Counter badge
163
<Button variant="primary" className="position-relative">
164
  Inbox
165
  <Badge
166
    bg="danger"
167
    pill
168
    className="position-absolute top-0 start-100 translate-middle"
169
  >
170
    99+
171
  </Badge>
172
</Button>
173
```
174

175
### Card
176

177
Card component for flexible content containers.
178

179
```typescript { .api }
180
/**
181
 * Card component for flexible content containers
182
 * @param border - Border color
183
 * @param text - Text color
184
 * @param bg - Background color
185
 */
186
function Card(props: CardProps): JSX.Element;
187

188
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
189
  /** Border color */
190
  border?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
191
  /** Text color */
192
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
193
  /** Background color */
194
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
195
  /** Component used for the root node */
196
  as?: React.ElementType;
197
  /** Bootstrap CSS class prefix */
198
  bsPrefix?: string;
199
}
200
```
201

202
### CardHeader
203

204
Header component for cards.
205

206
```typescript { .api }
207
/**
208
 * CardHeader component for card headers
209
 */
210
function CardHeader(props: CardHeaderProps): JSX.Element;
211

212
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
213
  /** Component used for the root node */
214
  as?: React.ElementType;
215
  /** Bootstrap CSS class prefix */
216
  bsPrefix?: string;
217
}
218
```
219

220
### CardBody
221

222
Body component for cards.
223

224
```typescript { .api }
225
/**
226
 * CardBody component for card bodies
227
 */
228
function CardBody(props: CardBodyProps): JSX.Element;
229

230
interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
231
  /** Component used for the root node */
232
  as?: React.ElementType;
233
  /** Bootstrap CSS class prefix */
234
  bsPrefix?: string;
235
}
236
```
237

238
### CardFooter
239

240
Footer component for cards.
241

242
```typescript { .api }
243
/**
244
 * CardFooter component for card footers
245
 */
246
function CardFooter(props: CardFooterProps): JSX.Element;
247

248
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
249
  /** Component used for the root node */
250
  as?: React.ElementType;
251
  /** Bootstrap CSS class prefix */
252
  bsPrefix?: string;
253
}
254
```
255

256
### CardTitle
257

258
Title component for cards.
259

260
```typescript { .api }
261
/**
262
 * CardTitle component for card titles
263
 */
264
function CardTitle(props: CardTitleProps): JSX.Element;
265

266
interface CardTitleProps extends React.HTMLAttributes<HTMLElement> {
267
  /** Component used for the root node */
268
  as?: React.ElementType;
269
  /** Bootstrap CSS class prefix */
270
  bsPrefix?: string;
271
}
272
```
273

274
### CardSubtitle
275

276
Subtitle component for cards.
277

278
```typescript { .api }
279
/**
280
 * CardSubtitle component for card subtitles
281
 */
282
function CardSubtitle(props: CardSubtitleProps): JSX.Element;
283

284
interface CardSubtitleProps extends React.HTMLAttributes<HTMLElement> {
285
  /** Component used for the root node */
286
  as?: React.ElementType;
287
  /** Bootstrap CSS class prefix */
288
  bsPrefix?: string;
289
}
290
```
291

292
### CardText
293

294
Text component for cards.
295

296
```typescript { .api }
297
/**
298
 * CardText component for card text content
299
 */
300
function CardText(props: CardTextProps): JSX.Element;
301

302
interface CardTextProps extends React.HTMLAttributes<HTMLElement> {
303
  /** Component used for the root node */
304
  as?: React.ElementType;
305
  /** Bootstrap CSS class prefix */
306
  bsPrefix?: string;
307
}
308
```
309

310
### CardImg
311

312
Image component for cards.
313

314
```typescript { .api }
315
/**
316
 * CardImg component for card images
317
 * @param variant - Image position variant
318
 */
319
function CardImg(props: CardImgProps): JSX.Element;
320

321
interface CardImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
322
  /** Image position variant */
323
  variant?: "top" | "bottom";
324
  /** Bootstrap CSS class prefix */
325
  bsPrefix?: string;
326
}
327
```
328

329
**Card Usage Examples:**
330

331
```typescript
332
import { Card, Button } from "react-bootstrap";
333

334
// Basic card
335
<Card style={{ width: '18rem' }}>
336
  <Card.Img variant="top" src="holder.js/100px180" />
337
  <Card.Body>
338
    <Card.Title>Card Title</Card.Title>
339
    <Card.Text>
340
      Some quick example text to build on the card title and make up the
341
      bulk of the card's content.
342
    </Card.Text>
343
    <Button variant="primary">Go somewhere</Button>
344
  </Card.Body>
345
</Card>
346

347
// Card with header and footer
348
<Card>
349
  <Card.Header>Featured</Card.Header>
350
  <Card.Body>
351
    <Card.Title>Special title treatment</Card.Title>
352
    <Card.Text>
353
      With supporting text below as a natural lead-in to additional content.
354
    </Card.Text>
355
    <Button variant="primary">Go somewhere</Button>
356
  </Card.Body>
357
  <Card.Footer className="text-muted">2 days ago</Card.Footer>
358
</Card>
359

360
// Colored card
361
<Card border="primary" style={{ width: '18rem' }}>
362
  <Card.Header>Header</Card.Header>
363
  <Card.Body>
364
    <Card.Title>Primary card title</Card.Title>
365
    <Card.Text>
366
      Some quick example text to build on the card title and make up the
367
      bulk of the card's content.
368
    </Card.Text>
369
  </Card.Body>
370
</Card>
371
```
372

373
### Table
374

375
Table component for displaying tabular data.
376

377
```typescript { .api }
378
/**
379
 * Table component for tabular data
380
 * @param striped - Striped rows
381
 * @param bordered - Border styling
382
 * @param borderless - Remove borders
383
 * @param hover - Hover effect
384
 * @param size - Table size
385
 * @param variant - Color variant
386
 * @param responsive - Responsive behavior
387
 */
388
function Table(props: TableProps): JSX.Element;
389

390
interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
391
  /** Striped rows */
392
  striped?: boolean | "columns";
393
  /** Border styling */
394
  bordered?: boolean;
395
  /** Remove borders */
396
  borderless?: boolean;
397
  /** Hover effect */
398
  hover?: boolean;
399
  /** Table size */
400
  size?: "sm";
401
  /** Color variant */
402
  variant?: "dark";
403
  /** Responsive behavior */
404
  responsive?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
405
  /** Bootstrap CSS class prefix */
406
  bsPrefix?: string;
407
}
408
```
409

410
**Table Usage Examples:**
411

412
```typescript
413
import { Table } from "react-bootstrap";
414

415
// Basic table
416
<Table striped bordered hover>
417
  <thead>
418
    <tr>
419
      <th>#</th>
420
      <th>First Name</th>
421
      <th>Last Name</th>
422
      <th>Username</th>
423
    </tr>
424
  </thead>
425
  <tbody>
426
    <tr>
427
      <td>1</td>
428
      <td>Mark</td>
429
      <td>Otto</td>
430
      <td>@mdo</td>
431
    </tr>
432
    <tr>
433
      <td>2</td>
434
      <td>Jacob</td>
435
      <td>Thornton</td>
436
      <td>@fat</td>
437
    </tr>
438
  </tbody>
439
</Table>
440

441
// Responsive table
442
<Table responsive>
443
  <thead>
444
    <tr>
445
      <th>Table heading</th>
446
      <th>Table heading</th>
447
      <th>Table heading</th>
448
    </tr>
449
  </thead>
450
  <tbody>
451
    <tr>
452
      <td>Table cell</td>
453
      <td>Table cell</td>
454
      <td>Table cell</td>
455
    </tr>
456
  </tbody>
457
</Table>
458

459
// Dark table
460
<Table variant="dark" striped bordered hover>
461
  <thead>
462
    <tr>
463
      <th>#</th>
464
      <th>First Name</th>
465
      <th>Last Name</th>
466
    </tr>
467
  </thead>
468
  <tbody>
469
    <tr>
470
      <td>1</td>
471
      <td>Mark</td>
472
      <td>Otto</td>
473
    </tr>
474
  </tbody>
475
</Table>
476
```
477

478
### ListGroup
479

480
List group component for displaying lists of content.
481

482
```typescript { .api }
483
/**
484
 * ListGroup component for displaying lists
485
 * @param variant - List variant
486
 * @param horizontal - Horizontal layout
487
 * @param numbered - Numbered items
488
 * @param as - Component type
489
 */
490
function ListGroup(props: ListGroupProps): JSX.Element;
491

492
interface ListGroupProps extends React.HTMLAttributes<HTMLElement> {
493
  /** List variant */
494
  variant?: "flush";
495
  /** Horizontal layout */
496
  horizontal?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
497
  /** Numbered items */
498
  numbered?: boolean;
499
  /** Component used for the root node */
500
  as?: React.ElementType;
501
  /** Bootstrap CSS class prefix */
502
  bsPrefix?: string;
503
}
504
```
505

506
### ListGroupItem
507

508
Individual list group item.
509

510
```typescript { .api }
511
/**
512
 * ListGroupItem component for list items
513
 * @param active - Active state
514
 * @param disabled - Disabled state
515
 * @param variant - Color variant
516
 * @param action - Action item styling
517
 */
518
function ListGroupItem(props: ListGroupItemProps): JSX.Element;
519

520
interface ListGroupItemProps extends React.HTMLAttributes<HTMLElement> {
521
  /** Active state */
522
  active?: boolean;
523
  /** Disabled state */
524
  disabled?: boolean;
525
  /** Color variant */
526
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
527
  /** Action item styling */
528
  action?: boolean;
529
  /** Event key */
530
  eventKey?: string;
531
  /** Link URL */
532
  href?: string;
533
  /** Component used for the root node */
534
  as?: React.ElementType;
535
  /** Bootstrap CSS class prefix */
536
  bsPrefix?: string;
537
}
538
```
539

540
**ListGroup Usage Examples:**
541

542
```typescript
543
import { ListGroup } from "react-bootstrap";
544

545
// Basic list group
546
<ListGroup>
547
  <ListGroup.Item>Cras justo odio</ListGroup.Item>
548
  <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
549
  <ListGroup.Item disabled>Morbi leo risus</ListGroup.Item>
550
  <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
551
</ListGroup>
552

553
// Action list group
554
<ListGroup>
555
  <ListGroup.Item action href="#link1">
556
    Link item
557
  </ListGroup.Item>
558
  <ListGroup.Item action active>
559
    Active item
560
  </ListGroup.Item>
561
  <ListGroup.Item action disabled>
562
    Disabled item
563
  </ListGroup.Item>
564
</ListGroup>
565

566
// Colored list items
567
<ListGroup>
568
  <ListGroup.Item variant="primary">Primary item</ListGroup.Item>
569
  <ListGroup.Item variant="success">Success item</ListGroup.Item>
570
  <ListGroup.Item variant="danger">Danger item</ListGroup.Item>
571
  <ListGroup.Item variant="warning">Warning item</ListGroup.Item>
572
</ListGroup>
573

574
// Flush list group
575
<ListGroup variant="flush">
576
  <ListGroup.Item>Cras justo odio</ListGroup.Item>
577
  <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
578
  <ListGroup.Item>Morbi leo risus</ListGroup.Item>
579
</ListGroup>
580
```
581

582
### ProgressBar
583

584
Progress bar component for showing completion progress.
585

586
```typescript { .api }
587
/**
588
 * ProgressBar component for showing progress
589
 * @param now - Current progress value
590
 * @param min - Minimum value
591
 * @param max - Maximum value
592
 * @param label - Progress label
593
 * @param srOnly - Screen reader only label
594
 * @param striped - Striped styling
595
 * @param animated - Animation
596
 * @param variant - Color variant
597
 */
598
function ProgressBar(props: ProgressBarProps): JSX.Element;
599

600
interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
601
  /** Current progress value */
602
  now?: number;
603
  /** Minimum value */
604
  min?: number;
605
  /** Maximum value */
606
  max?: number;
607
  /** Progress label */
608
  label?: React.ReactNode;
609
  /** Screen reader only label */
610
  srOnly?: boolean;
611
  /** Striped styling */
612
  striped?: boolean;
613
  /** Animation */
614
  animated?: boolean;
615
  /** Color variant */
616
  variant?: "success" | "info" | "warning" | "danger";
617
  /** Is child progress bar */
618
  isChild?: boolean;
619
  /** Bootstrap CSS class prefix */
620
  bsPrefix?: string;
621
}
622
```
623

624
**ProgressBar Usage Examples:**
625

626
```typescript
627
import { ProgressBar } from "react-bootstrap";
628

629
// Basic progress bar
630
<ProgressBar now={60} />
631
<ProgressBar now={40} label="40%" />
632

633
// Colored progress bars
634
<ProgressBar variant="success" now={40} />
635
<ProgressBar variant="info" now={20} />
636
<ProgressBar variant="warning" now={60} />
637
<ProgressBar variant="danger" now={80} />
638

639
// Striped progress bar
640
<ProgressBar striped variant="success" now={40} />
641
<ProgressBar striped animated variant="success" now={45} />
642

643
// Stacked progress bars
644
<ProgressBar>
645
  <ProgressBar striped variant="success" now={35} key={1} />
646
  <ProgressBar variant="warning" now={20} key={2} />
647
  <ProgressBar striped variant="danger" now={10} key={3} />
648
</ProgressBar>
649
```
650

651
### Image
652

653
Image component with responsive and styling options.
654

655
```typescript { .api }
656
/**
657
 * Image component with responsive options
658
 * @param fluid - Responsive image
659
 * @param rounded - Rounded corners
660
 * @param roundedCircle - Circular image
661
 * @param thumbnail - Thumbnail styling
662
 */
663
function Image(props: ImageProps): JSX.Element;
664

665
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
666
  /** Responsive image */
667
  fluid?: boolean;
668
  /** Rounded corners */
669
  rounded?: boolean;
670
  /** Circular image */
671
  roundedCircle?: boolean;
672
  /** Thumbnail styling */
673
  thumbnail?: boolean;
674
  /** Bootstrap CSS class prefix */
675
  bsPrefix?: string;
676
}
677
```
678

679
**Image Usage Examples:**
680

681
```typescript
682
import { Image } from "react-bootstrap";
683

684
// Responsive image
685
<Image src="holder.js/171x180" fluid />
686

687
// Rounded image
688
<Image src="holder.js/171x180" rounded />
689

690
// Circle image
691
<Image src="holder.js/171x180" roundedCircle />
692

693
// Thumbnail image
694
<Image src="holder.js/171x180" thumbnail />
695
```
696

697
### Figure
698

699
Figure component for images with captions.
700

701
```typescript { .api }
702
/**
703
 * Figure component for images with captions
704
 */
705
function Figure(props: FigureProps): JSX.Element;
706

707
interface FigureProps extends React.HTMLAttributes<HTMLElement> {
708
  /** Component used for the root node */
709
  as?: React.ElementType;
710
  /** Bootstrap CSS class prefix */
711
  bsPrefix?: string;
712
}
713
```
714

715
### FigureImage
716

717
Image component for figures.
718

719
```typescript { .api }
720
/**
721
 * FigureImage component for figure images
722
 */
723
function FigureImage(props: React.ImgHTMLAttributes<HTMLImageElement>): JSX.Element;
724
```
725

726
### FigureCaption
727

728
Caption component for figures.
729

730
```typescript { .api }
731
/**
732
 * FigureCaption component for figure captions
733
 */
734
function FigureCaption(props: FigureCaptionProps): JSX.Element;
735

736
interface FigureCaptionProps extends React.HTMLAttributes<HTMLElement> {
737
  /** Component used for the root node */
738
  as?: React.ElementType;
739
  /** Bootstrap CSS class prefix */
740
  bsPrefix?: string;
741
}
742
```
743

744
**Figure Usage Examples:**
745

746
```typescript
747
import { Figure } from "react-bootstrap";
748

749
<Figure>
750
  <Figure.Image
751
    width={171}
752
    height={180}
753
    alt="171x180"
754
    src="holder.js/171x180"
755
  />
756
  <Figure.Caption>
757
    Nulla vitae elit libero, a pharetra augue mollis interdum.
758
  </Figure.Caption>
759
</Figure>
760
```
761

762
### Toast
763

764
Toast component for showing temporary notifications.
765

766
```typescript { .api }
767
/**
768
 * Toast component for notifications
769
 * @param show - Show/hide state
770
 * @param onClose - Close handler
771
 * @param autohide - Auto hide behavior
772
 * @param delay - Auto hide delay
773
 * @param animation - Animation enabled
774
 * @param bg - Background variant
775
 */
776
function Toast(props: ToastProps): JSX.Element;
777

778
interface ToastProps extends React.HTMLAttributes<HTMLElement> {
779
  /** Show/hide state */
780
  show?: boolean;
781
  /** Close handler */
782
  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
783
  /** Auto hide behavior */
784
  autohide?: boolean;
785
  /** Auto hide delay (ms) */
786
  delay?: number;
787
  /** Animation enabled */
788
  animation?: boolean;
789
  /** Background variant */
790
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
791
  /** Transition component */
792
  transition?: React.ComponentType;
793
  /** Enter handler */
794
  onEnter?: () => void;
795
  /** Entering handler */
796
  onEntering?: () => void;
797
  /** Entered handler */
798
  onEntered?: () => void;
799
  /** Exit handler */
800
  onExit?: () => void;
801
  /** Exiting handler */
802
  onExiting?: () => void;
803
  /** Exited handler */
804
  onExited?: () => void;
805
  /** Bootstrap CSS class prefix */
806
  bsPrefix?: string;
807
}
808
```
809

810
### ToastBody
811

812
Body component for toast content.
813

814
```typescript { .api }
815
/**
816
 * ToastBody component for toast body content
817
 */
818
function ToastBody(props: ToastBodyProps): JSX.Element;
819

820
interface ToastBodyProps extends React.HTMLAttributes<HTMLDivElement> {
821
  /** Component used for the root node */
822
  as?: React.ElementType;
823
  /** Bootstrap CSS class prefix */
824
  bsPrefix?: string;
825
}
826
```
827

828
### ToastHeader
829

830
Header component for toasts with close button.
831

832
```typescript { .api }
833
/**
834
 * ToastHeader component for toast headers
835
 * @param closeButton - Show close button
836
 * @param closeLabel - Close button label
837
 */
838
function ToastHeader(props: ToastHeaderProps): JSX.Element;
839

840
interface ToastHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
841
  /** Show close button */
842
  closeButton?: boolean;
843
  /** Close button label */
844
  closeLabel?: string;
845
  /** Component used for the root node */
846
  as?: React.ElementType;
847
  /** Bootstrap CSS class prefix */
848
  bsPrefix?: string;
849
}
850
```
851

852
### ToastContainer
853

854
Container component for positioning and stacking toasts.
855

856
```typescript { .api }
857
/**
858
 * ToastContainer component for toast positioning
859
 * @param position - Toast position
860
 * @param containerPosition - Container position
861
 */
862
function ToastContainer(props: ToastContainerProps): JSX.Element;
863

864
interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
865
  /** Toast position */
866
  position?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
867
  /** Container position */
868
  containerPosition?: "fixed" | "static";
869
  /** Bootstrap CSS class prefix */
870
  bsPrefix?: string;
871
}
872
```
873

874
**Toast Usage Examples:**
875

876
```typescript
877
import { Toast, ToastContainer, Button } from "react-bootstrap";
878

879
function ToastExample() {
880
  const [show, setShow] = useState(false);
881

882
  return (
883
    <>
884
      <Button onClick={() => setShow(true)}>Show Toast</Button>
885
      
886
      <ToastContainer position="top-end" className="p-3">
887
        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
888
          <Toast.Header>
889
            <img
890
              src="holder.js/20x20?text=%20"
891
              className="rounded me-2"
892
              alt=""
893
            />
894
            <strong className="me-auto">Bootstrap</strong>
895
            <small>11 mins ago</small>
896
          </Toast.Header>
897
          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
898
        </Toast>
899
      </ToastContainer>
900
    </>
901
  );
902
}
903

904
// Colored toast
905
<Toast show={show} onClose={() => setShow(false)} bg="primary">
906
  <Toast.Header closeButton={false}>
907
    <strong className="me-auto text-white">Primary Toast</strong>
908
  </Toast.Header>
909
  <Toast.Body className="text-white">
910
    This is a primary toast message.
911
  </Toast.Body>
912
</Toast>
913

914
// Stacked toasts
915
<ToastContainer position="bottom-center">
916
  <Toast show={showA} onClose={() => setShowA(false)}>
917
    <Toast.Header>
918
      <strong className="me-auto">Toast A</strong>
919
    </Toast.Header>
920
    <Toast.Body>First toast message</Toast.Body>
921
  </Toast>
922
  <Toast show={showB} onClose={() => setShowB(false)}>
923
    <Toast.Header>
924
      <strong className="me-auto">Toast B</strong>
925
    </Toast.Header>
926
    <Toast.Body>Second toast message</Toast.Body>
927
  </Toast>
928
</ToastContainer>
929
```