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.

    Press esc to disable tab trapping

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

    Press esc to disable tab trapping

    Additional content

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

    Press esc to disable tab trapping

    Dismissing

    Add the dismissible prop to add a functioning dismiss button to the 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.

    Press esc to disable tab trapping

    API

    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.

    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.