{% extends 'layouts/base_background.html' %} {% load static %} {% block title %} Material Kit 2 by Creative Tim {% endblock title %} {% block body %} class="alerts-sections" {% endblock body %} {% block header %} {% include 'includes/navigation_light.html' %} {% endblock header %} {% 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
Get the Code
alerts-2

Alerts with Content

Screenshot
Get the Code
alerts-3

Dismissing Alert

Screenshot
Get the Code
alerts-4
{% endblock content %} {% block footer %} {% include 'includes/footer_fullscreen.html' %} {% endblock footer %} {% block javascripts %} {% include 'includes/scripts_sections.html' %} {% endblock javascripts %}