Alerts

    Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

    Examples

    Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight variants.

    [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Alert key={idx} variant={variant}>
    This is a {variant} alert—check it out!
  </Alert>
));
    Press esc to disable tab trapping

    Links

    For links, use the <Alert.Link> component to provide matching colored links within any alert.

    [
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Alert key={idx} variant={variant}>
    This is a {variant} alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
));
    Press esc to disable tab trapping

    Additional content

    Alerts can content whatever content you like. Headers, paragraphs, dividers, go crazy.

    <Alert variant="success">
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <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 />
  <p className="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice
    and tidy.
  </p>
</Alert>;
    Press esc to disable tab trapping

    Dismissing

    Add the dismissible prop to add a functioning dismiss button to the Alert.

    <Alert dismissible variant="danger">
  <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>;
    Press esc to disable tab trapping

    You can also control the visual state directly which is great if you want to build more complicated alerts.

    class AlertDismissable extends React.Component {
  constructor(props) {
    super(props);

    this.state = { show: true };
  }

  render() {
    const handleHide = () => this.setState({ show: false });
    const handleShow = () => this.setState({ show: true });
    return (
      <>
        <Alert show={this.state.show} variant="success">
          <Alert.Heading>How's it going?!</Alert.Heading>
          <p>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
            eget lacinia odio sem nec elit. Cras mattis consectetur purus sit
            amet fermentum.
          </p>
          <hr />
          <div className="d-flex justify-content-end">
            <Button onClick={handleHide} variant="outline-success">
              Close me ya'll!
            </Button>
          </div>
        </Alert>

        {!this.state.show && <Button onClick={handleShow}>Show Alert</Button>}
      </>
    );
  }
}

render(<AlertDismissable />);
    Press esc to disable tab trapping

    API

    Alertview source file

    import Alert from 'react-bootstrap/Alert'
    NameTypeDefaultDescription
    closeLabel
    string
    		'Close alert'

    Sets the text for alert close button.

    dismissible
    boolean

    Renders a properly aligned dismiss button, as well as adding extra horizontal padding to the Alert.

    onClose
    function
    controls show

    Callback fired when alert is closed.

    show
    boolean
    		true
    controlled by: onClose, initial prop: defaultShow

    Controls the visual state of the Alert.

    transition
    elementType
    		<Fade>

    A react-transition-group Transition component used to animate the Alert on dismissal.

    variant
    'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'

    The Alert visual variant

    bsPrefix
    string
    		'alert'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Alert.Headingview source file

    import Alert from 'react-bootstrap/Alert'
    NameTypeDefaultDescription
    as
    elementType
    		<DivStyledAsH4>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'alert-heading'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Alert.Linkview source file

    import Alert from 'react-bootstrap/Alert'
    NameTypeDefaultDescription
    as
    elementType
    		<SafeAnchor>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'alert-link'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.