Content Components

/**
 * Alert component for contextual messages
 * @param variant - Alert color variant
 * @param dismissible - Allow dismissal
 * @param onClose - Close handler
 * @param show - Show/hide state
 * @param closeLabel - Close button label
 */
function Alert(props: AlertProps): JSX.Element;

interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Alert color variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Allow dismissal */
  dismissible?: boolean;
  /** Close handler */
  onClose?: () => void;
  /** Show/hide state */
  show?: boolean;
  /** Close button label */
  closeLabel?: string;
  /** Transition component */
  transition?: boolean | React.ComponentType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AlertHeading component for alert headings
 */
function AlertHeading(props: AlertHeadingProps): JSX.Element;

interface AlertHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * AlertLink component for links within alerts
 */
function AlertLink(props: AlertLinkProps): JSX.Element;

interface AlertLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Alert, Button } from "react-bootstrap";

// Basic alerts
<Alert variant="primary">Primary alert</Alert>
<Alert variant="success">Success alert</Alert>
<Alert variant="danger">Danger alert</Alert>
<Alert variant="warning">Warning alert</Alert>

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

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

// Alert with link
<Alert variant="info">
  This is an info alert with{' '}
  <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you like.
</Alert>

/**
 * Badge component for labels and counts
 * @param variant - Badge color variant
 * @param pill - Pill styling
 * @param text - Text color
 * @param bg - Background color
 */
function Badge(props: BadgeProps): JSX.Element;

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Badge color variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Pill styling */
  pill?: boolean;
  /** Text color */
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
  /** Background color */
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Badge, Button } from "react-bootstrap";

// Basic badges
<Badge bg="primary">Primary</Badge>
<Badge bg="secondary">Secondary</Badge>
<Badge bg="success">Success</Badge>
<Badge bg="danger">Danger</Badge>

// Pill badges
<Badge pill bg="primary">Primary</Badge>
<Badge pill bg="secondary">Secondary</Badge>

// Badges in buttons
<Button variant="primary">
  Notifications <Badge bg="secondary">4</Badge>
</Button>

// Counter badge
<Button variant="primary" className="position-relative">
  Inbox
  <Badge
    bg="danger"
    pill
    className="position-absolute top-0 start-100 translate-middle"
  >
    99+
  </Badge>
</Button>

/**
 * Card component for flexible content containers
 * @param border - Border color
 * @param text - Text color
 * @param bg - Background color
 */
function Card(props: CardProps): JSX.Element;

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Border color */
  border?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Text color */
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
  /** Background color */
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardHeader component for card headers
 */
function CardHeader(props: CardHeaderProps): JSX.Element;

interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardBody component for card bodies
 */
function CardBody(props: CardBodyProps): JSX.Element;

interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardFooter component for card footers
 */
function CardFooter(props: CardFooterProps): JSX.Element;

interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardTitle component for card titles
 */
function CardTitle(props: CardTitleProps): JSX.Element;

interface CardTitleProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardSubtitle component for card subtitles
 */
function CardSubtitle(props: CardSubtitleProps): JSX.Element;

interface CardSubtitleProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardText component for card text content
 */
function CardText(props: CardTextProps): JSX.Element;

interface CardTextProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * CardImg component for card images
 * @param variant - Image position variant
 */
function CardImg(props: CardImgProps): JSX.Element;

interface CardImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  /** Image position variant */
  variant?: "top" | "bottom";
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Card, Button } from "react-bootstrap";

// Basic card
<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

// Card with header and footer
<Card>
  <Card.Header>Featured</Card.Header>
  <Card.Body>
    <Card.Title>Special title treatment</Card.Title>
    <Card.Text>
      With supporting text below as a natural lead-in to additional content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
  <Card.Footer className="text-muted">2 days ago</Card.Footer>
</Card>

// Colored card
<Card border="primary" style={{ width: '18rem' }}>
  <Card.Header>Header</Card.Header>
  <Card.Body>
    <Card.Title>Primary card title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
    </Card.Text>
  </Card.Body>
</Card>

/**
 * Table component for tabular data
 * @param striped - Striped rows
 * @param bordered - Border styling
 * @param borderless - Remove borders
 * @param hover - Hover effect
 * @param size - Table size
 * @param variant - Color variant
 * @param responsive - Responsive behavior
 */
function Table(props: TableProps): JSX.Element;

interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
  /** Striped rows */
  striped?: boolean | "columns";
  /** Border styling */
  bordered?: boolean;
  /** Remove borders */
  borderless?: boolean;
  /** Hover effect */
  hover?: boolean;
  /** Table size */
  size?: "sm";
  /** Color variant */
  variant?: "dark";
  /** Responsive behavior */
  responsive?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Table } from "react-bootstrap";

// Basic table
<Table striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</Table>

// Responsive table
<Table responsive>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</Table>

// Dark table
<Table variant="dark" striped bordered hover>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
  </tbody>
</Table>

/**
 * ListGroup component for displaying lists
 * @param variant - List variant
 * @param horizontal - Horizontal layout
 * @param numbered - Numbered items
 * @param as - Component type
 */
function ListGroup(props: ListGroupProps): JSX.Element;

interface ListGroupProps extends React.HTMLAttributes<HTMLElement> {
  /** List variant */
  variant?: "flush";
  /** Horizontal layout */
  horizontal?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
  /** Numbered items */
  numbered?: boolean;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ListGroupItem component for list items
 * @param active - Active state
 * @param disabled - Disabled state
 * @param variant - Color variant
 * @param action - Action item styling
 */
function ListGroupItem(props: ListGroupItemProps): JSX.Element;

interface ListGroupItemProps extends React.HTMLAttributes<HTMLElement> {
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Color variant */
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Action item styling */
  action?: boolean;
  /** Event key */
  eventKey?: string;
  /** Link URL */
  href?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { ListGroup } from "react-bootstrap";

// Basic list group
<ListGroup>
  <ListGroup.Item>Cras justo odio</ListGroup.Item>
  <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
  <ListGroup.Item disabled>Morbi leo risus</ListGroup.Item>
  <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
</ListGroup>

// Action list group
<ListGroup>
  <ListGroup.Item action href="#link1">
    Link item
  </ListGroup.Item>
  <ListGroup.Item action active>
    Active item
  </ListGroup.Item>
  <ListGroup.Item action disabled>
    Disabled item
  </ListGroup.Item>
</ListGroup>

// Colored list items
<ListGroup>
  <ListGroup.Item variant="primary">Primary item</ListGroup.Item>
  <ListGroup.Item variant="success">Success item</ListGroup.Item>
  <ListGroup.Item variant="danger">Danger item</ListGroup.Item>
  <ListGroup.Item variant="warning">Warning item</ListGroup.Item>
</ListGroup>

// Flush list group
<ListGroup variant="flush">
  <ListGroup.Item>Cras justo odio</ListGroup.Item>
  <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
  <ListGroup.Item>Morbi leo risus</ListGroup.Item>
</ListGroup>

/**
 * ProgressBar component for showing progress
 * @param now - Current progress value
 * @param min - Minimum value
 * @param max - Maximum value
 * @param label - Progress label
 * @param srOnly - Screen reader only label
 * @param striped - Striped styling
 * @param animated - Animation
 * @param variant - Color variant
 */
function ProgressBar(props: ProgressBarProps): JSX.Element;

interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Current progress value */
  now?: number;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Progress label */
  label?: React.ReactNode;
  /** Screen reader only label */
  srOnly?: boolean;
  /** Striped styling */
  striped?: boolean;
  /** Animation */
  animated?: boolean;
  /** Color variant */
  variant?: "success" | "info" | "warning" | "danger";
  /** Is child progress bar */
  isChild?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { ProgressBar } from "react-bootstrap";

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

// Colored progress bars
<ProgressBar variant="success" now={40} />
<ProgressBar variant="info" now={20} />
<ProgressBar variant="warning" now={60} />
<ProgressBar variant="danger" now={80} />

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

// Stacked progress bars
<ProgressBar>
  <ProgressBar striped variant="success" now={35} key={1} />
  <ProgressBar variant="warning" now={20} key={2} />
  <ProgressBar striped variant="danger" now={10} key={3} />
</ProgressBar>

/**
 * Image component with responsive options
 * @param fluid - Responsive image
 * @param rounded - Rounded corners
 * @param roundedCircle - Circular image
 * @param thumbnail - Thumbnail styling
 */
function Image(props: ImageProps): JSX.Element;

interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
  /** Responsive image */
  fluid?: boolean;
  /** Rounded corners */
  rounded?: boolean;
  /** Circular image */
  roundedCircle?: boolean;
  /** Thumbnail styling */
  thumbnail?: boolean;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Image } from "react-bootstrap";

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

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

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

// Thumbnail image
<Image src="holder.js/171x180" thumbnail />

/**
 * Figure component for images with captions
 */
function Figure(props: FigureProps): JSX.Element;

interface FigureProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * FigureImage component for figure images
 */
function FigureImage(props: React.ImgHTMLAttributes<HTMLImageElement>): JSX.Element;

/**
 * FigureCaption component for figure captions
 */
function FigureCaption(props: FigureCaptionProps): JSX.Element;

interface FigureCaptionProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Figure } from "react-bootstrap";

<Figure>
  <Figure.Image
    width={171}
    height={180}
    alt="171x180"
    src="holder.js/171x180"
  />
  <Figure.Caption>
    Nulla vitae elit libero, a pharetra augue mollis interdum.
  </Figure.Caption>
</Figure>

/**
 * Toast component for notifications
 * @param show - Show/hide state
 * @param onClose - Close handler
 * @param autohide - Auto hide behavior
 * @param delay - Auto hide delay
 * @param animation - Animation enabled
 * @param bg - Background variant
 */
function Toast(props: ToastProps): JSX.Element;

interface ToastProps extends React.HTMLAttributes<HTMLElement> {
  /** Show/hide state */
  show?: boolean;
  /** Close handler */
  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;
  /** Auto hide behavior */
  autohide?: boolean;
  /** Auto hide delay (ms) */
  delay?: number;
  /** Animation enabled */
  animation?: boolean;
  /** Background variant */
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  /** Transition component */
  transition?: React.ComponentType;
  /** Enter handler */
  onEnter?: () => void;
  /** Entering handler */
  onEntering?: () => void;
  /** Entered handler */
  onEntered?: () => void;
  /** Exit handler */
  onExit?: () => void;
  /** Exiting handler */
  onExiting?: () => void;
  /** Exited handler */
  onExited?: () => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ToastBody component for toast body content
 */
function ToastBody(props: ToastBodyProps): JSX.Element;

interface ToastBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ToastHeader component for toast headers
 * @param closeButton - Show close button
 * @param closeLabel - Close button label
 */
function ToastHeader(props: ToastHeaderProps): JSX.Element;

interface ToastHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show close button */
  closeButton?: boolean;
  /** Close button label */
  closeLabel?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ToastContainer component for toast positioning
 * @param position - Toast position
 * @param containerPosition - Container position
 */
function ToastContainer(props: ToastContainerProps): JSX.Element;

interface ToastContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Toast position */
  position?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
  /** Container position */
  containerPosition?: "fixed" | "static";
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Toast, ToastContainer, Button } from "react-bootstrap";

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

  return (
    <>
      <Button onClick={() => setShow(true)}>Show Toast</Button>
      
      <ToastContainer position="top-end" className="p-3">
        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </Toast.Header>
          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
        </Toast>
      </ToastContainer>
    </>
  );
}

// Colored toast
<Toast show={show} onClose={() => setShow(false)} bg="primary">
  <Toast.Header closeButton={false}>
    <strong className="me-auto text-white">Primary Toast</strong>
  </Toast.Header>
  <Toast.Body className="text-white">
    This is a primary toast message.
  </Toast.Body>
</Toast>

// Stacked toasts
<ToastContainer position="bottom-center">
  <Toast show={showA} onClose={() => setShowA(false)}>
    <Toast.Header>
      <strong className="me-auto">Toast A</strong>
    </Toast.Header>
    <Toast.Body>First toast message</Toast.Body>
  </Toast>
  <Toast show={showB} onClose={() => setShowB(false)}>
    <Toast.Header>
      <strong className="me-auto">Toast B</strong>
    </Toast.Header>
    <Toast.Body>Second toast message</Toast.Body>
  </Toast>
</ToastContainer>