{% extends "layouts/base.html" %} {% load static %} {% block body %}alerts-sections{% endblock body %} {% block navigation %} {% include "includes/navigation-light.html" %} {% endblock navigation %} {% block content %}

Alerts

Simple Alerts

Copy
<div class="container py-5">
  <div class="row">
    <div class="alert alert-primary text-white font-weight-bold" role="alert">
      A simple primary alert—check it out!
    </div>
    <div class="alert alert-secondary text-white font-weight-bold" role="alert">
      A simple secondary alert—check it out!
    </div>
    <div class="alert alert-success text-white font-weight-bold" role="alert">
      A simple success alert—check it out!
    </div>
    <div class="alert alert-danger text-white font-weight-bold" role="alert">
      A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning text-white font-weight-bold" role="alert">
      A simple warning alert—check it out!
    </div>
    <div class="alert alert-info text-white font-weight-bold" role="alert">
      A simple info alert—check it out!
    </div>
    <div class="alert alert-light text-white font-weight-bold" role="alert">
      A simple light alert—check it out!
    </div>
    <div class="alert alert-dark text-white font-weight-bold" role="alert">
      A simple dark alert—check it out!
    </div>
  </div>
</div>

Alerts with Links

Screenshot
alerts-2

Alerts with Content

Screenshot
alerts-3

Dismissing Alert

Screenshot
alerts-4
{% endblock content %} {% block footer %} {% include "includes/footer-light.html" %} {% endblock footer %} {% block extra_js %} {% endblock extra_js %}