{% extends "partials/layouts/main-layout.html.twig" %} {% block body_attributes %} {% endblock %} {% block sidebar %} {% include "partials/sidebar.html.twig" %} {% endblock %} {% block hr_sidebar %} {% include "partials/horizontal-sidebar.html.twig" %} {% endblock %} {% block content %}
{% include "partials/breadcrumb.html.twig" with {'title': "Notification", 'subtitle': "Home"} %}

Default Alert

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For background color use class .bg-* , .text-white

Dismissing Alerts

Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.

Outline Alerts

Add a dismiss button and the .border-{ color } class, which adds extra padding to the right of the alert and positions the .close button.

Light Alerts

Add a dismiss button and the .alert-light-{ color } class, which adds extra padding to the right of the alert and positions the .close button.

Outline Rounded Alerts

Add a dismiss button and the .rounded-pill class, which adds extra padding to the right of the alert and positions the .close button.

Light Rounded Alerts

Add a dismiss button and the .alert-light-{ color } class, which adds extra padding to the right of the alert and positions the .close button.

Notify Alerts

Alerts Links

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

{% endblock %}