Icons in Bootstrap

The customization of our MyPhoto navbar is coming along nicely. We now have a nice scroll animation in place as well as a set of navbar items that update themselves based on the user’s scroll position. However, we are not quite there yet. The items in our Profile dropdown menu still look quite plain. Wouldn’t it be nice if we could use icons to increase each drop-down menu item’s readability? Adding icons to controls and menus helps draw attention to important functionalities while clearly outlining a control’s intended purpose.

When it comes to icons, a popular choice among web developers is the Font Awesome icon library (https://fortawesome.github.io/Font-Awesome/), which is a free collection of over 500 icons that were made to be used with Bootstrap websites; refer to sample icons in figure 4.5:

To download the icon library, run an NPM install as follows:

npm install font-awesome

Once the download completes, you will see that a new subdirectory named font- awesome has been created inside your node_modules directory:

node_modules/
- font-awesome/
  - css/
  - fonts/
  - less/
  - scss/

Font Awesome icons ship as fonts. In order to be able to use the downloaded icons, all that you will need to do is include the Font Awesome style sheet that is located inside your node_modules/font-awesome/css directory. Insert the following link into the head of our HTML document:

The complete head of our HTML document should now look as follows:

<head>

href=”node_modules/bootstrap/dist/css/bootstrap.min.css” />

rel=’stylesheet’ type=’text/css’>

</head>

To use an icon, just apply the icon’s class name to an HTML element. The class names for individual icons can be determined by looking at either the Font Awesome documentation or using GlyphSearch (http://glyphsearch. com/), a handy little search engine that lets you search for icons, preview them, and then copy their class name to use within your HTML document. It is important to note that each (Font Awesome) icon must be a child of a special class—the fa class; that is, to use an icon, you must first apply the fa class to the selected element, followed by the icon’s name. For example, if your icon’s class name is fa- user, then you will set your element’s class attribute to class=”fa fa-user”:

Note that while it is perfectly acceptable to apply a fa class to any HTML element, the convention for icons is to use the <i> element, which is as shown:

Having applied an fa class to our desired element, we can now style it just as we would style any other element. For example, use this to change its color:

Now that we know how to include icons in our page, let’s go ahead and customize our Profile drop-down menu so that the individual drop-down menu items contain both text and a descriptive icon. Feel free to select your own icons; however, appropriate choices for each item would be as follows:

fa-user for Profile
fa-cog for Settings
fa-sign-out for Logout

To add the individual icons to our drop-down menu, simply create a new <i> in front of the menu item’s text and apply the appropriate class:

<a href=”#” class=”nav-link dropdown-toggle” data-toggle=

“dropdown” role=”button”

aria-haspopup=”true” aria-expanded=”false”> Profile <span class=”caret”></span>

</a>

<i class=”fa fa-user”></i> Profile

</a>

<i class=”fa fa-cogs”></i> Settings

</a>

<i class=”fa fa-sign-out”></i> Logout

</a>

</div>

</li>

</ul>

Take a look at the screenshot in figure 4.7:

Bootstrap 3 came with a large library of icons that range from symbols and objects to products. While the icons were provided by a third party (GLYPHICONS), they were free to use (for non-commercial purposes) and fully customizable. In this sense, the term customizable referred to the fact that they came embedded as fonts. This means that you could style them just as you would style any other text. For example, you can change their color or size by applying CSS in the same way as you would to any other HTML element. Unfortunately, Bootstrap 4 no longer ships with icons.

Using and customizing alerts

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:

Figure 4.8: Bootstrap’s eight contextual alert classes: .alert-success, .alert-warning, .alert-info, .alert-danger, .alert-primary, .alert-secondary, .alert-light and .alert-dark

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:

<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):

<h1>

Welcome to MyPhoto

</h1>

<p>Photographs you can cherish!</p>

</div>

<strong class=”alert-heading”>Unsupported browser</strong>

Internet Explorer 8 and lower are not supported by this website.

</div>

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

Figure 4.9: Our first dangerous alert dialog (example05.html)

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:

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

<!— Navbar markup —>

</nav>

<div class=”alert alert-danger alert-dismissible”

style=”position: fixed; margin-top: 4em; width: 90%;margin-left:

4em;”>

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

Figure 4.10: Our sticky alert dialog now stretches across the entire page and remains visible across the sections (example06.html)

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:

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

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:

Figure 4.11: Our alert now with a white foreground and a darker background (example07.html)

Bootstrap defines the colors for the individual context classes using the $theme-colors variable in _variables.scss. By default, this looks as follows:

$theme-colors: ( primary: $blue, secondary:

$gray-600, success: $green, info: $cyan, warning:

$yellow, danger: $red, light: $gray-100, dark: $gray-800 ) !default;

As such, one can globally override the default background color for a given alert by changing the value of the context to your desired background color. For example, to make the background of the danger alert blue, one can write the following:

$theme-colors: ( danger: $blue, … ) !default;

However, as previously noted, it is not recommended to do this as this will change the color of all danger alerts across the entire website.

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.

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Using and customizing alerts

Leave a Reply Cancel reply

Login