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 ...

Get Mastering Bootstrap 4 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial