Now that we know how to use icons, let's turn to a different topic—namely, alert boxes. Alert boxes are typically used to highlight an important event or to emphasize an important message. As such, the purpose behind alerts is to provide a content area that immediately stands out and therefore cannot be easily overseen by the user. For example, imagine that MyPhoto only supports browsers above certain versions. In such a case, a user who visits the site with an unsupported browser version should be notified that their browser is not supported. After all, the website may not function or display correctly when viewed with unsupported software. Bootstrap provides us with the alert class, which makes it very easy for us to implement this hypothetical scenario (the JavaScript for browser detection will be presented in Chapter 5, Speeding Up Development Using jQuery Plugins).

Bootstrap's alert supports eight contexts: Primary, Secondary, Success, Warning, Info, and Danger as well as Light and Dark (these contexts stand in contrast to Bootstrap 3, which only supported four different contexts).

Each context class styles the element to which it is applied differently, depending on the intended message. Refer to figure 4.8, which lists the eight default alert styles that come with Bootstrap:

Let's go ahead and apply one of these styles to our new unsupported browser alert box. Go ahead and create a new div and set its class to alert alert-danger:

<div class="alert alert-danger">
    <strong>Unsupported browser</strong> Internet Explorer 8 and 
    lower are not supported by this website.
</div>

Now insert this div alert inside our Welcome section, below the jumbotron: (example05.html):

<div class="container-fluid myphoto-section bg-myphoto-welcome" id="welcome">
   <div class="container">
      <div class="jumbotron">
         <h1>
            Welcome to MyPhoto
         </h1>
         <p>Photographs you can cherish!</p>
      </div>
      <div class="alert alert-danger">
         <strong class="alert-heading">Unsupported
         browser</strong> 
         Internet Explorer 8 and lower are not
         supported by this website.
      </div>
   </div>
</div>

Save and refresh. Voila! We have just created our very first Bootstrap alert; refer to figure 4.9:

However, something isn't quite right. What if the user knows that their browser is outdated, but still wishes to continue viewing the contents of our Welcome section without the invasive alert? Could we provide a way for the user to acknowledge the message and then allow them to continue browsing without its invasive presence? The answer is yes. Bootstrap provides us with a very easy way to make alerts dismissible using the data-dismiss attribute:

<div class="alert alert-danger alert-dismissible">
   <a href="#" class="close" data-dismiss="alert" aria-
   label="close">&times;</a>
   <strong>Unsupported browser</strong> Internet Explorer 8 and lower 
   are not supported by this website.
</div>

This will add an X to the right of our alert dialog. Adding the alert-dismissible class will align the X and have it inherit its color. Click on this X and see the alert disappear.

This is great. Users can now dismiss our alert. However, what happens when the user jumps straight into a different section of MyPhoto? Currently, the alert is placed inside our Welcome section. As such, users viewing other sections of our website will not necessarily be able to see the alert dialog. The solution is to adjust the position of our alert dialog so that it appears stuck to our page, regardless of the section that the user is currently in. How do we do this? First, we will need to take the alert outside of our Welcome section and move it just below our navbar. This will make the alert hidden behind our fixed navbar. To make the alert visible below our navbar, we can simply offset the position of the alert from the top of the page using the CSS margin-top property. To then make the alert sticky—that is, fixed below the navbar regardless of which section the user is currently in—we use the CSS position property and set it to fixed. Lastly, we can adjust the left offset and width of our alert so that it is nicely indented from the left-hand side of our page and stretches horizontally across the page (note that for the sake of keeping the sample code short and concise, we are applying inline styles to achieve this. However, as we will discover in Chapter 10, Optimizing Your Website, we should normally avoid using inline styles whenever we can). Observe the following code:

<nav class="navbar navbar-expand-lg fixed-top navbar-myphoto">
   <!-- Navbar markup -->
</nav>
<div class="alert alert-danger alert-dismissible"
   style="position: fixed; margin-top: 4em; width: 90%;margin-left: 
   4em;">
   <a href="#" class="close" data-dismiss="alert" 
      aria-label="close">&times;</a>
   <strong class="alert-heading">Unsupported browser</strong> 
   Internet Explorer 8 and lower are not supported by this website.
</div>

Take a look at the screenshot in figure 4.10:

Great! Try scrolling down the page and observe how our alert remains fixed below the navbar. Now, wouldn't it be great if we could achieve the same effect without any of the inline styles? Thanks to Bootstrap, we can. Go ahead and remove the inline styles and add the fixed-top class to the alert instead (just as we did with the navbar). Save and refresh. Did you note how the alert now appears above the navbar? You can rectify this by adjusting the alert's margin-top just as earlier. We can further customize the alert by adding an icon:

<div class="alert alert-danger alert-dismissible alert-myphoto fixed-top" style="position: fixed; margin-top: 4em; width: 90%;margin-left:
4em;">
     <a href="#" class="close" data-dismiss="alert" aria-                    
      label="close">&times;</a>
     <strong class="alert-heading">
         <i class="fa fa-exclamation"></i> Unsupported browser
     </strong>
     Internet Explorer 8 and lower are not supported by this website.
</div>

Our alert is already looking pretty decent. It is positioned nicely below our navbar, is dismissible, and sports a nice little icon. However, it somehow doesn't look very dangerous, does it? How about we customize its colors a bit? For example, we can darken the background color slightly and lighten the foreground color.

However, how will we go about doing this without modifying the Bootstrap source? Easy! Just apply the desired CSS properties using either an inline style or, even better, apply it globally throughout our style sheet. Go ahead and open styles/myphoto.css. Insert the following CSS snippet, save, and then refresh the MyPhoto page:

.alert-danger {
    background-color: #a94342;
    color: white;
}

The snippet that you just added to your myphoto.css file should be pretty self-explanatory—it applies a white foreground and a dark red background (figure 4.11) to any element that has the class alert-danger. Consequently, this foreground and background color will apply to any alert dialog that uses the alert-danger context class. Congratulations! You just learned how to customize your first Bootstrap component!

Let's finish by tidying any inline styles that we created (we will talk more about inline styles in Chapter 10, Optimizing Your Website; for now, just accept that you should avoid using inline styles whenever possible). Create a custom class, alert-myphoto, extract the inline styles into it, and add a z-index rule to ensure that our warning will appear above all the other elements on the page:

.alert-myphoto {
    margin-top: 4em;
    margin-left: 4em;
    width: 90%;
    z-index: 3000;
}

Also, the final HTML code should be like this:

  <div class="alert alert-danger alert-dismissible alert-myphoto fixed- 
  top">
    <a href="#" class="close" data-dismiss="alert" 
    arialabel="close">&times;</a>
    <strong class="alert-heading"><i class="fa fa-exclamation"></i> 
    Unsupported browser</strong> Internet Explorer 8 and lower are not 
    supported by this website.
</div>

Take a look at the screenshot in figure 4.11 and note how our alert is now nicely offset from the top and left of the page:

When adding links to alerts, you should apply the alert-link class to the link element. This will style the element to match the alert's context.