By the end of this chapter, you should be able to:
Before taking a look at some other Bootstrap components, let's briefly talk about icons. Prior to version 4 of Bootstrap, the library came with a built in icon library callled glyphicons. However, this icon library has been removed in version 4, and instead you're encouraged to use an external library for icons if you need it. The Bootstrap docs have a list of icon libraries that they recommend, including Iconic. One very popular library that they don't mention is Font Awesome.
Regardless of the icon library you choose, the process of adding an icon to the page is very similar. Here's an example that displays icons from both Iconic and Font Awesome:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Form Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <div class="container"> <p>Here are some Iconic icons:</p> <ul> <li><span class="oi oi-thumb-up"></span></li> <li><span class="oi oi-person"></span></li> <li><span class="oi oi-lock-locked"></span></li> </ul> <p>Here are some Font Awesome icons:</p> <ul> <li><i class="fa fa-thumbs-up"></i></li> <li><i class="fa fa-user"></i></li> <li><i class="fa fa-lock"></i></li> </ul> </div> </body> </html>
(View in CodePen.)
Note that for both of these libraries, icons are displayed by adding classes to certain inline elements. For Iconic icons, every icon should have the
oi class, plus an additional class for the specific icon, such as
oi-person. The pattern for Font Awesome is similar; the biggest difference is that the class prefixes are
fa (for Font Awesome) instead of
Bootstrap makes it very easy to add styled navigation to a website with its navbar component. You can see how it looks here (we've toned down the example from the docs a bit to make it easier to digest):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Form Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">My App</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsed-content"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsed-content"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Team</a> </li> </ul> <form class="form-inline"> <input class="form-control mr-sm-2" type="text" placeholder="Username"> <input class="form-control mr-sm-2" type="text" placeholder="Password"> <button class="btn btn-outline-light" type="submit">Log In</button> </form> </div> </nav> </body> </html>
(View in CodePen.)
Some of these classes should look familiar. And even among the new ones, some common patterns exist. For example, even though the nav element has a lot of classes attached to it, the color options you have for nav bars are the same as the ones we've seen for things like alerts and buttons.
As this example shows, you can also add inline forms to your nav bars.
This navbar is responsive, but also broken. Notice that if you narrow the width of the screen, eventually everything inside of the div with a class of
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
If you add these script tags at the bottom of our nav bar example (right before the closing
body tag), you should see that the button in the navbar works! On small screens, the navigation collapses, but you can expand it by clicking on the button.
One of the downsides of using Bootstrap is that it's very easy to identify sites that are styled with Bootstrap. Fortunately, Bootswatch is a wonderful open source set of themes for Bootstrap to add some more customization and flavor so that your page doesn't look like every other Bootstrap page. You can think of Bootswatch themes as different skins for Bootstrap; the code you write will be the same regardless of the theme, but the end result on the page will look different. There are Bootswatch themes available for version 4 and version 3 of Bootstrap. You can find the version 4 themes here
To include a Bootswatch theme, you can click the "Download" button and copy the CSS to a file and link to it using a
link tag. You can also access the themes via CDN here.
As with many tools, it's easier to read through the Bootstrap documentation and feel like you understand it than it is to implement Bootstrap's features in practice. The best way to reach mastery using Bootstrap is, well, to use Bootstrap. A lot. Build some simple webpages and add a couple of Bootstrap components. Break things and fix them. These chapters should hopefully serve as a useful reference, but the only way you'll learn how to use Bootstrap is to practice using Bootstrap regularly.
When you're ready, move on to Bootstrap Exercise