Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Default Alert

Primary! You should read this message.

Secondary! You should read this message.

Success! You should read this message.

Info! You should read this message.

Warning! You should read this message.

Danger! You should read this message.

Dark! You should read this message.

Light! You should read this message.

      <div class="alert alert-primary"><strong>Primary!</strong>You should read this message.</div>
      <div class="alert alert-secondary"><strong>Secondary!</strong>You should read this message.</div>
      <div class="alert alert-success"><strong>Success!</strong>You should read this message.</div>
      <div class="alert alert-info"><strong>Info!</strong>You should read this message.</div>
      <div class="alert alert-warning"><strong>Warning!</strong>You should read this message.</div>
      <div class="alert alert-danger"><strong>Danger!</strong>You should read this message.</div>
      <div class="alert alert-dark"><strong>Dark!</strong>You should read this message.</div>
      <div class="alert alert-light"><strong>Light!</strong>You should read this message.</div>

Animated Alert

Success! You should read this message.

      <div class="alert alert-primary bg-animation text-white"><strong>Success!</strong>You should read this message.</div>

Gradient Alert

Primary! You should read this message.

Secondary! You should read this message.

Success! You should read this message.

Info! You should read this message.

Warning! You should read this message.

Danger! You should read this message.

Dark! You should read this message.

Light! You should read this message.

      <div class="alert alert-primary alert-primary-gradient text-white"><strong>Primary!</strong>You should read this message.</div>
      <div class="alert alert-secondary  alert-secondary-gradient text-white"><strong>Secondary!</strong>You should read this message.</div>
      <div class="alert alert-success alert-success-gradient text-white"><strong>Success!</strong>You should read this message.</div>
      <div class="alert alert-info alert-info-gradient text-white"><strong>Info!</strong>You should read this message.</div>
      <div class="alert alert-warning alert-warning-gradient text-white"><strong>Warning!</strong>You should read this message.</div>
      <div class="alert alert-danger alert-danger-gradient text-white"><strong>Danger!</strong>You should read this message.</div>
      <div class="alert alert-dark alert-dark-gradient text-white"><strong>Dark!</strong>You should read this message.</div>
      <div class="alert alert-light alert-light-gradient text-white"><strong>Light!</strong>You should read this message.</div>

Alert With Links

Primary! You should read this message.

Secondary! You should read this message.

Success! You should read this message.

Info! You should read this message.

Warning! You should read this message.

Danger! You should read this message.

Dark! You should read this message.

Light! You should read this message.

   <div class="alert alert-primary"><strong>Primary!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-secondary"><strong>Secondary!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-success"><strong>Success!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-info"><strong>Info!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-warning"><strong>Warning!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-danger"><strong>Danger!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-dark"><strong>Dark!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>
   <div class="alert alert-light"><strong>Light!</strong>You should <a class="alert-link" href="#"> read this message.</a></div>

Dissmiss Alert

Primary! You should read this message.

Secondary! You should read this message..

Success! You should read this message..

Info! You should read this message..

Warning! You should read this message..

Danger! You should read this message..

Dark! You should read this message.

Light! You should read this message.

   <div class="alert alert-primary alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Primary!</strong>You should read this message.</div>
   <div class="alert alert-secondary alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Secondary!</strong>You should read this message.</div>
   <div class="alert alert-success alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Success!</strong>You should read this message.</div>
   <div class="alert alert-info alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Info!</strong>You should read this message.</div>
   <div class="alert alert-warning alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Warning!</strong>You should read this message.</div>
   <div class="alert alert-danger alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Danger!</strong>You should read this message.</div>
   <div class="alert alert-dark alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Dark!</strong>You should read this message.</div>
   <div class="alert alert-light alert-dismissible"><button class="btn-close" type="button"  data-bs-dismiss="alert"></button><strong>Light!</strong>You should read this message.</div>