Alerts

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.

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

<div class="alert alert-success" 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.

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

<div class="alert bg-info 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.

Primary - A simple primary alert - check it out!

Secondary - A simple secondary alert - check it out!

Success - A simple success alert - check it out!

Danger - A simple danger alert - check it out!

Warning - A simple warning alert - check it out!

Info - A simple info alert - check it out!

Light - A simple light alert - check it out!

Dark - A simple dark 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>