Responsive Flash messages built with the latest Bootstrap 5. Flash messages provide contextual feedback informations for typical user actions with a handful of responsible and flexible messages boxes.
Check out Bootstrap Avatars Documentation for detailed instructions & even more examples.
Basic examples
HTML:
<!-- Trigger buttons -->
<button type="button" id="primary" class="btn btn-primary m-1">Primary</button>
<button type="button" id="secondary" class="btn btn-secondary m-1">Secondary</button>
<button type="button" id="success" class="btn btn-success m-1">Success</button>
<button type="button" id="danger" class="btn btn-danger m-1">Danger</button>
<button type="button" id="warning" class="btn btn-warning m-1">Warning</button>
<button type="button" id="info" class="btn btn-info m-1">Info</button>
<button type="button" id="light" class="btn btn-light m-1">Light</button>
<button type="button" id="dark" class="btn btn-dark m-1">Dark</button>
<!-- Alerts -->
<div
class="alert fade"
id="alert-primary"
role="alert"
data-mdb-color="primary"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple primary flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-secondary"
role="alert"
data-mdb-color="secondary"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple secondary flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-success"
role="alert"
data-mdb-color="success"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple success flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-danger"
role="alert"
data-mdb-color="danger"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple danger flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-warning"
role="alert"
data-mdb-color="warning"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple warning flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-info"
role="alert"
data-mdb-color="info"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple info flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-light"
role="alert"
data-mdb-color="light"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple light flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div
class="alert fade"
id="alert-dark"
role="alert"
data-mdb-color="dark"
data-mdb-position="top-right"
data-mdb-stacking="true"
data-mdb-width="535px"
data-mdb-width="535px"
data-mdb-append-to-body="true"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="2000"
>
A simple dark flash message with
<a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>JS:
const triggers = [
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
'light',
'dark',
];
const basicInstances = [
'alert-primary',
'alert-secondary',
'alert-success',
'alert-danger',
'alert-warning',
'alert-info',
'alert-light',
'alert-dark',
];
triggers.forEach((trigger, index) => {
let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
document.getElementById(trigger).addEventListener('click', () => {
basicInstance.show();
});
});How to use?
-
Download MDB 5 - free UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
More examples
Bootstrap Flash messages static examples:
Bootstrap Flash messages icons:
Bootstrap Flash messages dismissing:
