React Bootstrap docs

Alerts

Provide contextual feedback messages for typical user actions.

Basic example

import Alert from 'react-bootstrap/Alert'

export default function AlertsBasicDemo() {
  return (
    <>
      {[
        'primary',
        'secondary',
        'success',
        'danger',
        'warning',
        'info',
        'light',
        'dark'
      ].map((variant) => (
        <Alert key={variant} variant={variant}>
          A simple {variant} with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
        </Alert>
      ))}
    </>
  )
}

Alert with icon

import Alert from 'react-bootstrap/Alert'

export default function AlertsWithIconDemo() {
  return (
    <>
      {[
        { variant: 'primary', icon: 'bell' },
        { variant: 'secondary', icon: 'clock' },
        { variant: 'success', icon: 'check-circle' },
        { variant: 'danger', icon: 'banned' },
        { variant: 'warning', icon: 'alert-triangle' },
        { variant: 'info', icon: 'info' },
        { variant: 'light', icon: 'unlock' },
        { variant: 'dark', icon: 'map-pin' },
      ].map((alert) => (
        <Alert key={alert.variant} variant={alert.variant} className="d-flex">
          <i className={`ci-${alert.icon} fs-lg pe-1 mt-1 me-2`}/>
          <div>
            A simple {alert.variant} alert with{' '}
            <a href="#" className="alert-link">
              an example link
            </a>
            . Give it a click if you like.
          </div>
        </Alert>
      ))}
    </>
  )
}

Dismissible alert

'use client'

import { useState } from 'react'
import Alert from 'react-bootstrap/Alert'
import AlertHeading from 'react-bootstrap/AlertHeading'
import Button from 'react-bootstrap/Button'

export default function AlertsDismissibleDemo() {
  const [show, setShow] = useState(true)

  return (
    <>
      {show ? (
        <Alert variant="danger" onClose={() => setShow(false)} dismissible>
          <AlertHeading>Oh snap! You got an error!</AlertHeading>
          <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>
      ) : (
        <Button variant="outline-dark" onClick={() => setShow(true)}>
          Show Alert
        </Button>
      )}
    </>
  )
}

Additional content

import Alert from 'react-bootstrap/Alert'
import AlertHeading from 'react-bootstrap/AlertHeading'
import Button from 'react-bootstrap/Button'

export default function AlertsAdditionalContentDemo() {
  return (
    <Alert variant="success" className="d-sm-flex pb-4 pt-sm-4">
      <i className="ci-check-circle fs-4 mt-1 mb-2 mb-sm-0"/>
      <div className="ps-sm-3 pe-sm-4">
        <AlertHeading className="mb-2">Well done!</AlertHeading>
        <p>
          Aww yeah, you successfully read this important alert message. This example text is going to run a bit
          longer so that you can see how spacing within an alert works with this kind of content.
        </p>
        <hr className="text-success opacity-25 my-3" />
        <p className="mb-4">
          Whenever you need to, be sure to use margin and padding utilities to keep things nice and tidy.
        </p>
        <Button variant="success">Action button</Button>
      </div>
    </Alert>
  )
}
Top