templates/alerts/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.                             <!-- PAGE-HEADER -->
  5.                             <div class="page-header">
  6.                                 <div>
  7.                                     <h1 class="page-title">Alerts</h1>
  8.                                 </div>
  9.                                 <div class="ms-auto pageheader-btn">
  10.                                     <ol class="breadcrumb">
  11.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">UI Elements</a></li>
  12.                                         <li class="breadcrumb-item active" aria-current="page">Alerts</li>
  13.                                     </ol>
  14.                                 </div>
  15.                             </div>
  16.                             <!-- PAGE-HEADER END -->
  18.                             <!-- ROW-1 OPEN -->
  19.                             <div class="row">
  20.                                 <div class="col-lg-12">
  21.                                     <div class="card">
  22.                                         <div class="card-header border-bottom">
  23.                                             <h3 class="card-title">Default alerts</h3>
  24.                                         </div>
  25.                                         <div class="card-body">
  26.                                             <div class="text-wrap">
  27.                                                 <div class="example">
  28.                                                     <div class="alert alert-default alert-dismissible fade show" role="alert">
  29.                                                         <span class="alert-inner--text">Default alert—At vero eos et accusamus praesentium!</span>
  30.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  31.                                                             <span aria-hidden="true">×</span>
  32.                                                         </button>
  33.                                                     </div>
  34.                                                     <div class="alert alert-primary alert-dismissible fade show" role="alert">
  35.                                                         <span class="alert-inner--text">Primary alert—At vero eos et accusamus praesentium!</span>
  36.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  37.                                                             <span aria-hidden="true">×</span>
  38.                                                         </button>
  39.                                                     </div>
  40.                                                     <div class="alert alert-secondary alert-dismissible fade show" role="alert">
  41.                                                         <span class="alert-inner--text">Secondary alert—At vero eos et accusamus praesentium!</span>
  42.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  43.                                                             <span aria-hidden="true">×</span>
  44.                                                         </button>
  45.                                                     </div>
  46.                                                     <div class="alert alert-success alert-dismissible fade show" role="alert">
  47.                                                         <span class="alert-inner--text">Success alert—At vero eos et accusamus praesentium!</span>
  48.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  49.                                                             <span aria-hidden="true">×</span>
  50.                                                         </button>
  51.                                                     </div>
  52.                                                     <div class="alert alert-warning alert-dismissible fade show" role="alert">
  53.                                                         <span class="alert-inner--text">Warning alert—At vero eos et accusamus praesentium!</span>
  54.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  55.                                                             <span aria-hidden="true">×</span>
  56.                                                         </button>
  57.                                                     </div>
  58.                                                     <div class="alert alert-info alert-dismissible fade show" role="alert">
  59.                                                         <span class="alert-inner--text">Info alert—At vero eos et accusamus praesentium!</span>
  60.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  61.                                                             <span aria-hidden="true">×</span>
  62.                                                         </button>
  63.                                                     </div>
  64.                                                     <div class="alert alert-danger alert-dismissible fade show" role="alert">
  65.                                                         <span class="alert-inner--text">Danger alert—At vero eos et accusamus praesentium!</span>
  66.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  67.                                                             <span aria-hidden="true">×</span>
  68.                                                         </button>
  69.                                                     </div>
  70.                                                     <div class="alert alert-light alert-dismissible fade show" role="alert">
  71.                                                         <span class="alert-inner--text">Light alert—At vero eos et accusamus praesentium!</span>
  72.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  73.                                                             <span aria-hidden="true">×</span>
  74.                                                         </button>
  75.                                                     </div>
  76.                                                     <div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
  77.                                                         <span class="alert-inner--text">Dark alert—At vero eos et accusamus praesentium!</span>
  78.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  79.                                                             <span aria-hidden="true">×</span>
  80.                                                         </button>
  81.                                                     </div>
  82.                                                 </div>
  83.                                             </div>
  84.                                         </div>
  85.                                     </div>
  86.                                 </div><!-- COL END -->
  87.                             </div>
  88.                             <!-- ROW-1 CLOSED -->
  90.                             <!-- ROW-2 OPEN -->
  91.                             <div class="row">
  92.                                 <div class="col-lg-12">
  93.                                     <div class="card">
  94.                                         <div class="card-header border-bottom">
  95.                                             <h3 class="card-title">Links in alerts</h3>
  96.                                         </div>
  97.                                         <div class="card-body">
  98.                                             <div class="text-wrap">
  99.                                                 <div class="example">
  100.                                                     <div class="alert alert-default alert-dismissible fade show" role="alert">
  101.                                                         <strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link fw-bold">this important alert message.</a>
  102.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  103.                                                             <span aria-hidden="true">×</span>
  104.                                                         </button>
  105.                                                     </div>
  106.                                                     <div class="alert alert-success alert-dismissible fade show" role="alert">
  107.                                                         <strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link fw-bold">this important alert message.</a>
  108.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  109.                                                             <span aria-hidden="true">×</span>
  110.                                                         </button>
  111.                                                     </div>
  112.                                                     <div class="alert alert-info alert-dismissible fade show" role="alert">
  113.                                                         <strong>Well done!</strong> You successfully read <a href="javascript:void(0)" class="alert-link fw-bold">this important alert message.</a>
  114.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  115.                                                             <span aria-hidden="true">×</span>
  116.                                                         </button>
  117.                                                     </div>
  118.                                                     <div class="alert alert-warning alert-dismissible fade show" role="alert">
  119.                                                         <strong>Warning! </strong> Better check yourself, you're <a href="javascript:void(0)" class="alert-link fw-bold">not looking too good.</a>
  120.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  121.                                                             <span aria-hidden="true">×</span>
  122.                                                         </button>
  123.                                                     </div>
  124.                                                     <div class="alert alert-danger alert-dismissible fade show" role="alert">
  125.                                                         <strong>Oh snap!</strong> <a href="javascript:void(0)" class="alert-link fw-bold">Change a few things up </a>and try submitting again.
  126.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  127.                                                             <span aria-hidden="true">×</span>
  128.                                                         </button>
  129.                                                     </div>
  130.                                                     <div class="alert alert-light alert-dismissible fade show" role="alert">
  131.                                                         <strong>Well Done! </strong> You successfully read <a href="javascript:void(0)" class="alert-link fw-bold">this important alert message.</a>
  132.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  133.                                                             <span aria-hidden="true">×</span>
  134.                                                         </button>
  135.                                                     </div>
  136.                                                     <div class="alert alert-dark alert-dismissible fade show" role="alert">
  137.                                                         <strong>Well Done! </strong> You successfully read <a href="javascript:void(0)" class="alert-link fw-bold">this important alert message.</a>
  138.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  139.                                                             <span aria-hidden="true">×</span>
  140.                                                         </button>
  141.                                                     </div>
  142.                                                 </div>
  143.                                             </div>
  144.                                         </div>
  145.                                     </div>
  146.                                 </div><!-- COL END -->
  147.                             </div>
  148.                             <!-- ROW-2 CLOSED -->
  150.                             <!-- ROW-3 OPEN -->
  151.                             <div class="row">
  152.                                 <div class="col-lg-12">
  153.                                     <div class="card">
  154.                                         <div class="card-header border-bottom">
  155.                                             <h3 class="card-title">Alert with icon</h3>
  156.                                         </div>
  157.                                         <div class="card-body">
  158.                                             <div class="text-wrap">
  159.                                                 <p>Add <code class="highlighter-rouge">.alert-icon</code> class.</p>
  160.                                                 <div class="example">
  161.                                                     <div class="alert alert-success alert-dismissible fade show" role="alert">
  162.                                                         <i class="fa fa-check-circle-o me-2" aria-hidden="true"></i> Well done! You have successfully read this important alert message.
  163.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  164.                                                             <span aria-hidden="true">×</span>
  165.                                                         </button>
  166.                                                     </div>
  167.                                                     <div class="alert alert-info alert-dismissible fade show" role="alert">
  168.                                                         <i class="fa fa-bell-o me-2" aria-hidden="true"></i>Heads up! This alert needs your attention, but it's not super important.
  169.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  170.                                                             <span aria-hidden="true">×</span>
  171.                                                         </button>
  172.                                                     </div>
  173.                                                     <div class="alert alert-warning alert-dismissible fade show" role="alert">
  174.                                                         <i class="fa fa-exclamation me-2" aria-hidden="true"></i> Warning! Better check yourself, you're not looking too good.
  175.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  176.                                                             <span aria-hidden="true">×</span>
  177.                                                         </button>
  178.                                                     </div>
  179.                                                     <div class="alert alert-danger alert-dismissible fade show" role="alert">
  180.                                                         <i class="fa fa-frown-o me-2" aria-hidden="true"></i>Oh snap! Change a few things up and try submitting again.
  181.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  182.                                                             <span aria-hidden="true">×</span>
  183.                                                         </button>
  184.                                                     </div>
  185.                                                 </div>
  186.                                             </div>
  187.                                         </div>
  188.                                     </div>
  189.                                 </div><!-- COL END -->
  190.                             </div>
  191.                             <!-- ROW-3 CLOSED -->
  193.                             <!-- ROW-4 OPEN -->
  194.                             <div class="row">
  195.                                 <div class="col-lg-12">
  196.                                     <div class="card">
  197.                                         <div class="card-header border-bottom">
  198.                                             <h3 class="card-title">Alert with avatar</h3>
  199.                                         </div>
  200.                                         <div class="card-body">
  201.                                             <div class="text-wrap">
  202.                                                 <div class="example">
  203.                                                     <div class="alert alert-avatar alert-default alert-dismissible">
  204.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  205.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/8.jpg'))}}"></span>
  206.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  207.                                                     </div>
  208.                                                     <div class="alert alert-avatar alert-primary alert-dismissible">
  209.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  210.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/14.jpg'))}}"></span>
  211.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  212.                                                     </div>
  213.                                                     <div class="alert alert-avatar alert-info alert-dismissible">
  214.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  215.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/15.jpg'))}}"></span>
  216.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  217.                                                     </div>
  218.                                                     <div class="alert alert-avatar alert-warning alert-dismissible">
  219.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  220.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/7.jpg'))}}"></span>
  221.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  222.                                                     </div>
  223.                                                     <div class="alert alert-avatar alert-light alert-dismissible">
  224.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  225.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/12.jpg'))}}"></span>
  226.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  227.                                                     </div>
  228.                                                     <div class="alert alert-avatar alert-dark alert-dismissible">
  229.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-hidden="true">×</button>
  230.                                                         <span class="avatar brround cover-image" data-bs-image-src="{{absolute_url(asset('build/images/users/6.jpg'))}}"></span>
  231.                                                         Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  232.                                                     </div>
  233.                                                 </div>
  234.                                             </div>
  235.                                         </div>
  236.                                     </div>
  237.                                 </div><!-- COL END -->
  238.                             </div>
  239.                             <!-- ROW-4 CLOSED -->
  241.                             <!-- ROW-5 OPEN -->
  242.                             <div class="row">
  243.                                 <div class="col-xl-12">
  244.                                     <div class="card">
  245.                                         <div class="card-header border-bottom">
  246.                                             <h3 class="card-title">Alerts With Icons</h3>
  247.                                         </div>
  248.                                         <div class="card-body">
  249.                                             <div class="text-wrap">
  250.                                                 <div class="example">
  251.                                                     <div class="alert alert-default" role="alert">
  252.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-download"></i></span>
  253.                                                         <span class="alert-inner--text"><strong>Default!</strong> This is a warning alert—check it out that has an icon too!</span>
  254.                                                     </div>
  255.                                                     <div class="alert alert-primary" role="alert">
  256.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-check-square"></i></span>
  257.                                                         <span class="alert-inner--text"><strong>Primary!</strong> This is a warning alert—check it out that has an icon too!</span>
  258.                                                     </div>
  259.                                                     <div class="alert alert-success" role="alert">
  260.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-thumbs-up"></i></span>
  261.                                                         <span class="alert-inner--text"><strong>Success!</strong> This is a warning alert—check it out that has an icon too!</span>
  262.                                                     </div>
  263.                                                     <div class="alert alert-info" role="alert">
  264.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-bell"></i></span>
  265.                                                         <span class="alert-inner--text"><strong>Info!</strong> This is a warning alert—check it out that has an icon too!</span>
  266.                                                     </div>
  267.                                                     <div class="alert alert-warning" role="alert">
  268.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-info"></i></span>
  269.                                                         <span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
  270.                                                     </div>
  271.                                                     <div class="alert alert-danger mb-0" role="alert">
  272.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-slash"></i></span>
  273.                                                         <span class="alert-inner--text"><strong>Danger!</strong> This is a warning alert—check it out that has an icon too!</span>
  274.                                                     </div>
  275.                                                 </div>
  276.                                             </div>
  277.                                         </div>
  278.                                     </div>
  279.                                     <div class="card">
  280.                                         <div class="card-header border-bottom">
  281.                                             <h3 class=" card-title mb-0">Alerts With Icons Dismissing</h3>
  282.                                         </div>
  283.                                         <div class="card-body">
  284.                                             <div class="text-wrap">
  285.                                                 <div class="example">
  286.                                                     <div class="alert alert-default alert-dismissible fade show" role="alert">
  287.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-download"></i></span>
  288.                                                         <span class="alert-inner--text"><strong>Default!</strong> This is a default alert—check it out!</span>
  289.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  290.                                                             <span aria-hidden="true">×</span>
  291.                                                         </button>
  292.                                                     </div>
  293.                                                     <div class="alert alert-primary alert-dismissible fade show" role="alert">
  294.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-check-square"></i></span>
  295.                                                         <span class="alert-inner--text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
  296.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  297.                                                             <span aria-hidden="true">×</span>
  298.                                                         </button>
  299.                                                     </div>
  300.                                                     <div class="alert alert-success alert-dismissible fade show" role="alert">
  301.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-thumbs-up"></i></span>
  302.                                                         <span class="alert-inner--text"><strong>Success!</strong> This is a success alert—check it out!</span>
  303.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  304.                                                             <span aria-hidden="true">×</span>
  305.                                                         </button>
  306.                                                     </div>
  307.                                                     <div class="alert alert-warning alert-dismissible fade show" role="alert">
  308.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-info"></i></span>
  309.                                                         <span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
  310.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  311.                                                             <span aria-hidden="true">×</span>
  312.                                                         </button>
  313.                                                     </div>
  314.                                                     <div class="alert alert-info alert-dismissible fade show" role="alert">
  315.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-bell"></i></span>
  316.                                                         <span class="alert-inner--text"><strong>Info!</strong> This is a info alert—check it out!</span>
  317.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  318.                                                             <span aria-hidden="true">×</span>
  319.                                                         </button>
  320.                                                     </div>
  321.                                                     <div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
  322.                                                         <span class="alert-inner--icon me-2"><i class="fe fe-slash"></i></span>
  323.                                                         <span class="alert-inner--text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
  324.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  325.                                                             <span aria-hidden="true">×</span>
  326.                                                         </button>
  327.                                                     </div>
  328.                                                 </div>
  329.                                             </div>
  330.                                         </div>
  331.                                     </div>
  332.                                 </div><!-- COL END -->
  333.                             </div>
  334.                             <!-- ROW-5 CLOSED -->
  336.                             <!-- ROW-6 OPEN -->
  337.                             <div class="row">
  338.                                 <div class="col-md-12">
  339.                                     <div class="card">
  340.                                         <div class="card-header border-bottom">
  341.                                             <h3 class="card-title">Alerts Popovers</h3>
  342.                                         </div>
  343.                                         <div class="card-body">
  344.                                             <div class="text-wrap">
  345.                                                 <div class="example">
  346.                                                     <div class="row ms-0">
  347.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  348.                                                             <button type="button" class="btn btn-success d-grid" data-bs-container="body" data-bs-toggle="popover" data-bs-popover-color="popsuccess" data-bs-placement="bottom" title="alert sucess" data-bs-content="Well done! You successfully read this important alert message..">
  349.                                                                 Show success
  350.                                                             </button>
  351.                                                         </div>
  352.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  353.                                                             <button type="button" class="btn btn-info d-grid" data-bs-container="body" data-bs-toggle="popover" data-bs-popover-color="popinfo" data-bs-placement="top" title="alert info" data-bs-content="Heads up! This alert needs your attention, but it's not super important...">
  354.                                                                 Show info
  355.                                                             </button>
  356.                                                         </div>
  357.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  358.                                                             <button type="button" class="btn d-grid btn-warning" data-bs-container="body" data-bs-toggle="popover" data-bs-popover-color="popwarning" data-bs-placement="bottom" title="alert warning" data-bs-content="Warning! Best check yo self, you're not looking too good..">
  359.                                                                 Show warning
  360.                                                             </button>
  361.                                                         </div>
  363.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  364.                                                             <button type="button" class="btn d-grid btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-popover-color="popdanger" data-bs-placement="bottom" title="alert danger" data-bs-content="Oh snap! Change a few things up and try submitting again.">
  365.                                                                 Show danger
  366.                                                             </button>
  367.                                                         </div>
  368.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  369.                                                             <button type="button" class="btn d-grid btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-popover-color="popsecondary" data-bs-placement="top" title="alert secondary" data-bs-content="Error! Please Check u r emial id..">
  370.                                                                 Show secondary
  371.                                                             </button>
  372.                                                         </div>
  373.                                                         <div class="col-xl-2 col-lg-4 col-md-6 mt-2 mb-2 d-f-ai-c-jc-c">
  374.                                                             <button type="button" class="btn d-grid btn-primary" data-bs-container="body"  data-bs-toggle="popover" data-bs-popover-color="pop-primary" data-bs-placement="top" title="alert primary" data-bs-content="Cool! This alert will close in 3 seconds. The data-bs-delay attribute is in milliseconds.">
  375.                                                                 Show primary
  376.                                                             </button>
  377.                                                         </div>
  378.                                                     </div>
  379.                                                 </div>
  380.                                             </div>
  381.                                         </div>
  382.                                     </div>
  383.                                 </div><!-- COL END -->
  384.                                 <div class="col-md-12">
  385.                                     <div class="card">
  386.                                         <div class="card-header border-bottom">
  387.                                             <h3 class="card-title">Alerts style</h3>
  388.                                         </div>
  389.                                         <div class="card-body">
  390.                                             <div class="text-wrap mb-4">
  391.                                                 <div class="example">
  392.                                                     <div class="alert alert-success alert-dismissible fade show p-0 mb-4" role="alert">
  393.                                                         <p class="py-3 px-5 mb-0 border-bottom border-bottom-success-light">
  394.                                                             <span class="alert-inner--icon me-2"><i class="fe fe-thumbs-up"></i></span>
  395.                                                             <strong>Success Message</strong>
  396.                                                         </p>
  397.                                                         <p class="py-3 px-5">You successfully read this important alert message.</p>
  398.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  399.                                                             <span aria-hidden="true">×</span>
  400.                                                         </button>
  401.                                                     </div>
  402.                                                     <div class="alert alert-info alert-dismissible fade show p-0 mb-4" role="alert">
  403.                                                         <p class="py-3 px-5 mb-0 border-bottom border-bottom-info-light">
  404.                                                             <span class="alert-inner--icon me-2"><i class="fe fe-info"></i></span>
  405.                                                             <strong>Info Message</strong>
  406.                                                         </p>
  407.                                                         <p class="py-3 px-5">This alert needs your attention, but it's not super important.</p>
  408.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  409.                                                             <span aria-hidden="true">×</span>
  410.                                                         </button>
  411.                                                     </div>
  412.                                                     <div class="alert alert-warning alert-dismissible fade show p-0 mb-4" role="alert">
  413.                                                         <p class="py-3 px-5 mb-0 border-bottom border-bottom-warning-light">
  414.                                                             <span class="alert-inner--icon me-2"><i class="fe fe-alert-triangle"></i></span>
  415.                                                             <strong>Warning Message</strong>
  416.                                                         </p>
  417.                                                         <p class="py-3 px-5">Best check yo self, you're not looking too good</p>
  418.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  419.                                                             <span aria-hidden="true">×</span>
  420.                                                         </button>
  421.                                                     </div>
  422.                                                     <div class="alert alert-danger alert-dismissible fade show p-0 mb-0" role="alert">
  423.                                                         <p class="py-3 px-5 mb-0 border-bottom border-bottom-danger-light">
  424.                                                             <span class="alert-inner--icon me-2"><i class="fe fe-slash"></i></span>
  425.                                                             <strong>Danger Message</strong>
  426.                                                         </p>
  427.                                                         <p class="py-3 px-5">Change a few things up and try submitting again.</p>
  428.                                                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
  429.                                                             <span aria-hidden="true">×</span>
  430.                                                         </button>
  431.                                                     </div>
  432.                                                 </div>
  433.                                             </div>
  434.                                         </div>
  435.                                     </div>
  436.                                 </div><!-- COL END -->
  437.                             </div>
  438.                             <!-- ROW-6 CLOSED -->
  439. {% endblock %}