Toasts

Twitter bootstrap Documentation

Examples

Twitter bootstrap Documentation

Basic

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->toast([
    'fade' => true,
    'show' => true,
    'header' => [
        'image' => [
            '/twbs-helper-module/img/docs/rounded-blue.svg',
            ['alt' => '...', 'class' => 'rounded me-2'],
        ],
        'title' => 'Bootstrap',
        'subtitle' => '11 mins ago',
    ],
    'body' => 'Hello, world! This is a toast message.',
]);

Live example

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Show live toast',
        'variant' => 'primary',
    ],
    'attributes' => [
        'id' => 'liveToastBtn',
    ],
]);

echo $this->toast([
    'placement' => 'bottom-right',
    'header' => [
        'image' => [
            '/twbs-helper-module/img/docs/rounded-blue.svg',
            ['alt' => '...', 'class' => 'rounded me-2'],
        ],
        'title' => 'Bootstrap',
        'subtitle' => '11 mins ago',
    ],
    'body' => 'Hello, world! This is a toast message.',
    'attributes' => ['id' => 'liveToast'],
]);

Translucent

Twitter bootstrap Documentation

Result

Source

<?php

echo '<div class="bg-dark">';

echo $this->toast([
    'fade' => true,
    'show' => true,
    'header' => [
        'image' => [
            '/twbs-helper-module/img/docs/rounded-blue.svg',
            ['alt' => '...', 'class' => 'rounded me-2'],
        ],
        'title' => 'Bootstrap',
        'subtitle' => '11 mins ago',
    ],
    'body' => 'Hello, world! This is a toast message.',
]);

echo '</div>';

Stacking

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->toastStack([
    [
        'fade' => true,
        'show' => true,
        'header' => [
            'image' => [
                '/twbs-helper-module/img/docs/rounded-blue.svg',
                ['alt' => '...', 'class' => 'rounded me-2'],
            ],
            'title' => 'Bootstrap',
            'subtitle' => 'just now',
        ],
        'body' => 'See? Just like this.',
    ], [
        'fade' => true,
        'show' => true,
        'header' => [
            'image' => [
                '/twbs-helper-module/img/docs/rounded-blue.svg',
                ['alt' => '...', 'class' => 'rounded me-2'],
            ],
            'title' => 'Bootstrap',
            'subtitle' => '2 seconds ago',
        ],
        'body' => 'Heads up, toasts will stack automatically',
    ],
]);

Custom content

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->toast([
    'fade' => true,
    'show' => true,
    'body' => 'Hello, world! This is a toast message.',
]);

echo $this->toast([
    'fade' => true,
    'show' => true,
    'close' => false,
    'body' => [
        'content' => 'Hello, world! This is a toast message.',
        'buttons' => [
            [
                'options' => [
                    'variant' => 'primary',
                    'size' => 'sm',
                    'label' => 'Take action',
                ],
            ],
            [
                'options' => [
                    'size' => 'sm',
                    'label' => 'Close',
                ],
                'attributes' => [
                    'data-bs-dismiss' => 'toast',
                ],
            ],
        ],
    ],
]);

Color schemes

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->toast([
    'fade' => true,
    'show' => true,
    'body' => 'Hello, world! This is a toast message.',
    'close' => ['attributes' => ['class' => 'btn-close-white']],
    'attributes' => [
        'class' => 'text-white bg-primary border-0',
    ],
]);

Placement

Twitter bootstrap Documentation

Result

Source

<?php

echo '<div aria-atomic="true" aria-live="polite" class="bg-dark position-relative">';
foreach (
    [
        'top-left',
        'top-center',
        'top-right',
        'middle-left',
        'middle-center',
        'middle-right',
        'bottom-left',
        'bottom-center',
        'bottom-right',
    ] as $placement
) {
    echo $this->toastStack(
        [
            [
                'fade' => true,
                'show' => true,
                'close' => false,
                'header' => [
                    'image' => [
                        '/twbs-helper-module/img/docs/rounded-blue.svg',
                        ['alt' => '...', 'class' => 'rounded me-2'],
                    ],
                    'title' => 'Bootstrap',
                    'subtitle' => '11 mins ago',
                ],
                'body' => 'Hello, world! This is a toast message.',
            ],
        ],
        [
            'id' => 'toastPlacement',
            'placement' => $placement,
        ]
    );
}

echo '</div>';

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

echo '<div aria-atomic="true" aria-live="polite" class="position-relative">';

echo $this->toastStack(
    [
        [
            'fade' => true,
            'show' => true,
            'header' => [
                'image' => [
                    '/twbs-helper-module/img/docs/rounded-blue.svg',
                    ['alt' => '...', 'class' => 'rounded me-2'],
                ],
                'title' => 'Bootstrap',
                'subtitle' => 'just now',
            ],
            'body' => 'See? Just like this.',
        ],
        [
            'fade' => true,
            'show' => true,
            'header' => [
                'image' => [
                    '/twbs-helper-module/img/docs/rounded-blue.svg',
                    ['alt' => '...', 'class' => 'rounded me-2'],
                ],
                'title' => 'Bootstrap',
                'subtitle' => '2 seconds ago',
            ],
            'body' => 'Heads up, toasts will stack automatically',
        ],
    ],
    [
        'placement' => 'top-right',
        'class' => 'position-absolute',
    ]
);

echo '</div>';

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

echo '<div aria-live="polite" aria-atomic="true" ' .
'class="d-flex justify-content-center align-items-center w-100">';

echo $this->toast(
    [
        'fade' => true,
        'show' => true,
        'header' => [
            'image' => [
                '/twbs-helper-module/img/docs/rounded-blue.svg',
                ['alt' => '...', 'class' => 'rounded me-2'],
            ],
            'title' => 'Bootstrap',
            'subtitle' => '11 mins ago',
        ],
        'body' => 'Hello, world! This is a toast message.',
    ]
);

echo '</div>';

Accessibility

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->toast([
    'fade' => true,
    'show' => true,
    'autohide' => false,
    'header' => [
        'image' => [
            '/twbs-helper-module/img/docs/rounded-blue.svg',
            ['alt' => '...', 'class' => 'rounded me-2'],
        ],
        'title' => 'Bootstrap',
        'subtitle' => '11 mins ago',
    ],
    'body' => 'Hello, world! This is a toast message.',
]);