O'Reilly logo

Mastering Bootstrap 4 - Second Edition by Jason Marah, Benjamin Jakobus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The markup

As an example use case, let's display an alert informing the user of a special offer. We will add our alert above the unsupported browser alert:

    <div class="alert alert-info" style="position: fixed; margin-top:
    4em; width: 90%;margin-left: 4em;">
        <a href="#" class="close" data-dismiss="alert" 
        aria-label="close">&times;</a>
        <strong><i class="fa fa-exclamation"></i> Special Offer -          </strong>
        2 FOR 1 PRINTS TODAY ONLY WITH PROMO CODE <span style="font-
        style: italic">BOOTSTRAP</span>
    </div>

We're using Bootstrap's contextual information class, alert-info, to style the alert box, and we're following the same pattern as the unsupported browser alert. The special offer alert has inline styles applied, and the unsupported browser alert ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required