Alerts

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

Bootstrap Alerts documentation

Default style

Use .alert-* classes.

                    
                      <div class="alert alert-primary alert-dismissible fade show pe-5" role="alert">
                        This is a primary alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#fff"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-secondary alert-dismissible fade show pe-5" role="alert">
                        This is a secondary alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#1E1E1E"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-success alert-dismissible fade show pe-5" role="alert">
                        This is a success alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#fff"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-danger alert-dismissible fade show pe-5" role="alert">
                        This is a danger alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#fff"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-warning alert-dismissible fade show pe-5" role="alert">
                        This is a warning alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#1E1E1E"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-info alert-dismissible fade show pe-5" role="alert">
                        This is a info alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#1E1E1E"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-light alert-dismissible fade show pe-5" role="alert">
                        This is a light alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#1E1E1E"/>
                          </svg>
                        </button>
                      </div>
                      <div class="alert alert-dark alert-dismissible fade show pe-5" role="alert">
                        This is a dark alert—check it out!
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#fff"/>
                          </svg>
                        </button>
                      </div>

Link color

Use the .alert-link utility class to quickly provide matching colored links within any alert.

                    
                      <div class="alert alert-primary" role="alert">
                        This is a primary alert with <a href="#0" class="alert-link">an example link</a>. Give it a click if you like.
                      </div>

With Icon

                    
                      <div class="alert alert-primary media" role="alert">
                        <i class="fas fa-info-circle mt-1 me-1"></i>
                        <div class="media-body" role="alert">
                          This is a primary alert with <a href="#0" class="alert-link">an example link</a>. Give it a click if you like.
                        </div>
                      </div>

Dismissing

Use .alert-dismissible class for .alert.

                    
                      <div class="alert alert-warning alert-dismissible fade show pe-5" role="alert">
                        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
                        <button type="button" class="close p-2" data-dismiss="alert" aria-label="Close">
                          <svg xmlns="http://www.w3.org/2000/svg" width="11.528" height="12" viewBox="0 0 11.528 12">
                            <path d="M.788.1l.055.05,4.92,5.122L10.684.151a.48.48,0,0,1,.7,0,.53.53,0,0,1,.048.67l-.048.058L6.463,6l4.92,5.122a.529.529,0,0,1,0,.727.48.48,0,0,1-.643.05l-.055-.05L5.764,6.728.843,11.849a.48.48,0,0,1-.7,0A.53.53,0,0,1,.1,11.18l.048-.058L5.065,6,.145.878a.529.529,0,0,1,0-.727A.48.48,0,0,1,.721.057Z" fill="#1E1E1E"/>
                          </svg>
                        </button>
                      </div>

Additional content

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.

                    
                      <div class="alert alert-success" role="alert">
                        <h4 class="alert-heading">Well done!</h4>
                        <p class="text-inherit">Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
                        <hr />
                        <p class="text-inherit mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
                      </div>