Toast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Basic

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

Design
Code
<Toast>
    <Toast.Header>
        <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
        <strong className="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
    </Toast.Header>
    <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>

Translucent

Design
Code
<Toast className="mb-4" >
    <Toast.Header>
        <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
        <strong className="me-auto">Bootstrap</strong>
        <small>just now</small>
    </Toast.Header>
    <Toast.Body>See? Just like this.</Toast.Body>
</Toast>

Stacking

When you have multiple toasts, we default to vertically stacking them in a readable manner.

Design
Code
<Toast className="mb-4">
    <Toast.Header>
        <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
        <strong className="me-auto">Bootstrap</strong>
        <small>just now</small>
    </Toast.Header>
    <Toast.Body>See? Just like this.</Toast.Body>
</Toast>
<Toast animation={false}>
    <Toast.Header>
        <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
        <strong className="me-auto">Bootstrap</strong>
        <small>2 seconds ago</small>
    </Toast.Header>
    <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
</Toast>

Placement

Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle.

Design
Code
<div className="mb-3">
    <label htmlFor="selectToastPlacement">Toast position</label>
    <Form.Select
        id="selectToastPlacement"
        className="mt-2"
        onChange={(e) => setPosition(e.currentTarget.value)}
        >
        {[
            'top-start',
            'top-center',
            'top-end',
            'middle-start',
            'middle-center',
            'middle-end',
            'bottom-start',
            'bottom-center',
            'bottom-end',
        ].map((p) => (
            <option key={p} value={p}>
                {p}
            </option>
        ))}
    </Form.Select>
</div>
<div
    aria-live="polite"
    aria-atomic="true"
    className="position-relative"
    style={{ minHeight: '240px' }}
    >
    <ToastContainer className="p-3" position={position}>
        <Toast>
            <Toast.Header closeButton={false}>
                <Image src="/images/avatar/avatar-1.jpg" className="rounded me-2 avatar-xs" alt="..." />
                <strong className="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
            </Toast.Header>
            <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
        </Toast>
    </ToastContainer>
</div>

For systems that generate more notifications, consider using a wrapping element so they can easily stack.

Design
Code
<div
    aria-live="polite"
    aria-atomic="true"
    style={{
        position: 'relative',
        minHeight: '250px',
    }}
    >
    <div
        style={{
            position: 'absolute',
            top: 0,
            right: 0,
        }}
        >
        <Toast className="mb-4">
            <Toast.Header>
                <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
                <strong className="me-auto">Bootstrap</strong>
                <small>just now</small>
            </Toast.Header>
            <Toast.Body>See? Just like this.</Toast.Body>
        </Toast>
        <Toast className="mb-4">
            <Toast.Header>
                <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
                <strong className="me-auto">Bootstrap</strong>
                <small>2 seconds ago</small>
            </Toast.Header>
            <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
        </Toast>
    </div>
</div>

You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.

Design
Code
<div aria-live="polite" aria-atomic="true" className="d-flex justify-content-center align-items-center" 
    style={{
        position: 'relative',
        minHeight: '250px',
    }}>
    <Toast>
        <Toast.Header>
            <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
        </Toast.Header>
        <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
    </Toast>
</div>

Dismissible

Design
Code
const Toasts = () => {

    const [showA, setShowA] = useState(true);
    const [showB, setShowB] = useState(true);
  
    const toggleShowA = () => setShowA(!showA);
    const toggleShowB = () => setShowB(!showB);

    return ( 
        <Fragment> 
            <Row>
                <Col md={6} className="mb-2">
                    <Button onClick={toggleShowA} className="mb-2">
                        Toggle Toast <strong>with</strong> Animation
                    </Button>
                    <Toast className="mb-4" show={showA} onClose={toggleShowA}>
                        <Toast.Header>
                            <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
                            <strong className="me-auto">Bootstrap</strong>
                            <small>just now</small>
                        </Toast.Header>
                        <Toast.Body>See? Just like this.</Toast.Body>
                    </Toast>
                </Col>
                <Col md={6} className="mb-2">
                    <Button onClick={toggleShowB} className="mb-2">
                        Toggle Toast <strong>without</strong> Animation
                    </Button>
                    <Toast onClose={toggleShowB} show={showB} animation={false}>
                        <Toast.Header>
                            <Image src="https://fakeimg.pl/20x20/754FFE/754FFE/" className="rounded me-2" alt="" />
                            <strong className="me-auto">Bootstrap</strong>
                            <small>2 seconds ago</small>
                        </Toast.Header>
                        <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
                    </Toast>
                </Col>
            </Row>
        </Fragment>
    )
}