Tabler

Download more icon variants from https://tabler-icons.io/i/brand-github Source code Download more icon variants from https://tabler-icons.io/i/heart Sponsor
Download more icon variants from https://tabler-icons.io/i/moon Download more icon variants from https://tabler-icons.io/i/sun
Download more icon variants from https://tabler-icons.io/i/bell

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Download more icon variants from https://tabler-icons.io/i/star
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Download more icon variants from https://tabler-icons.io/i/star
Example 3
Update change-version.js (#29736)
Download more icon variants from https://tabler-icons.io/i/star
Example 4
Regenerate package-lock.json (#29730)
Download more icon variants from https://tabler-icons.io/i/star
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Alerts

Download more icon variants from https://tabler-icons.io/i/external-link Bootstrap documentation

Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.

Default markup

Depending on the information you need to convey, you can use one of the following types of alert messages - success, info, warning or danger. Using the right type of alert modal will help draw users’ attention to the message and prompt them to take action.

<div class="alert alert-success" role="alert">
  <h4 class="alert-title">Wow! Everything worked!</h4>
  <div class="text-muted">Your account has been saved!</div>
</div>
<div class="alert alert-info" role="alert">
  <h4 class="alert-title">Did you know?</h4>
  <div class="text-muted">Here is something that you might like to know.</div>
</div>
<div class="alert alert-warning" role="alert">
  <h4 class="alert-title">Uh oh, something went wrong</h4>
  <div class="text-muted">Sorry! There was a problem with your request.</div>
</div>
<div class="alert alert-danger" role="alert">
  <h4 class="alert-title">I'm so sorry&hellip;</h4>
  <div class="text-muted">Your account has been deleted and can't be restored.</div>
</div>

Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.

<div class="alert alert-success" role="alert">
  This is a success alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-info" role="alert">
  This is a info alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert — <a href="#" class="alert-link">check it out</a>!
</div>
<div class="alert alert-danger" role="alert">
  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
</div>

Dismissible alerts

Add the x close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.

<div class="alert alert-success alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/check -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Wow! Everything worked!</h4>
      <div class="text-muted">Your account has been saved!</div>
    </div>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Did you know?</h4>
      <div class="text-muted">Here is something that you might like to know.</div>
    </div>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Uh oh, something went wrong</h4>
      <div class="text-muted">Sorry! There was a problem with your request.</div>
    </div>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">I'm so sorry&hellip;</h4>
      <div class="text-muted">Your account has been deleted and can't be restored.</div>
    </div>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>

Alerts with icons

Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.

<div class="alert alert-success" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/check -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Wow! Everything worked!</h4>
      <div class="text-muted">Your account has been saved!</div>
    </div>
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Did you know?</h4>
      <div class="text-muted">Here is something that you might like to know.</div>
    </div>
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">Uh oh, something went wrong</h4>
      <div class="text-muted">Sorry! There was a problem with your request.</div>
    </div>
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      <h4 class="alert-title">I'm so sorry&hellip;</h4>
      <div class="text-muted">Your account has been deleted and can't be restored.</div>
    </div>
  </div>
</div>

Alert with avatar

Add an avatar to your alert modal to make it more personalized.

<div class="alert alert-success" role="alert">
  <div class="d-flex">
    <div>
      <span class="avatar float-start me-3" style="background-image: url(...)"></span>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>
<div class="alert alert-info" role="alert">
  <div class="d-flex">
    <div>
      <span class="avatar float-start me-3">JL</span>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>
<div class="alert alert-warning" role="alert">
  <div class="d-flex">
    <div>
      <span class="avatar float-start me-3" style="background-image: url(...)"></span>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>
<div class="alert alert-danger" role="alert">
  <div class="d-flex">
    <div>
      <span class="avatar float-start me-3" style="background-image: url(...)"></span>
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>

Alert with buttons

Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.

<div class="alert alert-success alert-dismissible" role="alert">
  <h3 class="mb-1">Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-success">Okay</a>
    <a href="#" class="btn">Cancel</a>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
  <h3 class="mb-1">Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-info">Okay</a>
    <a href="#" class="btn">Cancel</a>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
  <h3 class="mb-1">Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-warning">Okay</a>
    <a href="#" class="btn">Cancel</a>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
  <h3 class="mb-1">Some Title</h3>
  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
  <div class="btn-list">
    <a href="#" class="btn btn-danger">Okay</a>
    <a href="#" class="btn">Cancel</a>
  </div>
  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>

Important alerts

If you want your alert to be really eye-catching, you can add a class alert-important.

<div class="alert alert-important alert-success alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/check -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      Your account has been saved!
    </div>
  </div>
  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-important alert-info alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/info-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      Here is something that you might like to know.
    </div>
  </div>
  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-important alert-warning alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      Sorry! There was a problem with your request.
    </div>
  </div>
  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-important alert-danger alert-dismissible" role="alert">
  <div class="d-flex">
    <div>
      <!-- Download SVG icon from http://tabler-icons.io/i/alert-circle -->
      <!-- SVG icon code with class="alert-icon" -->
    </div>
    <div>
      Your account has been deleted and can't be restored.
    </div>
  </div>
  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
</div>