Alerts

Light

Your subscription ends on 25 February 2015

Upgrade

Oh snap!Change a few things up and try submitting again.

Warning!Better check yourself, you're not looking too good.

<div class="alert alert-light border-1 border-left-4 border-left-accent" role="alert">

                              <strong>Well done!</strong>

                              You successfully read this important alert message.

                            </div>

Soft background

For a soft background, use one of the eight contextual classes i.e. .alert-success.

Well done!You successfully read this important alert message.

Oh snap!Change a few things up and try submitting again.

Warning!Better check yourself, you're not looking too good.

<div class="alert alert-accent" role="alert">

                              <strong>Well done!</strong>

                              You successfully read this important alert message.

                            </div>

Strong background

For a stronger background color use the .bg-*classes and .text-white.border-0.

Well done!You successfully read this important alert message.

Oh snap!Change a few things up and try submitting again.

Warning!Better check yourself, you're not looking too good.

<div class="alert bg-primary text-white border-0" role="alert">

                              <strong>Heads up!</strong>

                              This alert needs your attention, but it's not super important.

                            </div>

Dismissible Alerts

Add a button and the .alert-dismissibleclass, which adds extra padding to the right of the alert and positions the .closebutton.

Success - A simple success alert - check it out!

Primary - A simple primary alert - check it out!

Secondary - A simple secondary alert - check it out!

<div class="alert alert-dismissible bg-primary text-white border-0 fade show" role="alert">

                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                                <span aria-hidden="true">&times;</span>

                              </button>

                              <strong>Primary - </strong> A simple primary alert - check it out!

                            </div>