Installing Bootstrap, for the purposes of learning it, will be different from how we'll install ng-bootstrap in our Angular application. This chapter focuses on Bootstrap's grid system as well as some of its components, and so we're going to keep things simple for now by not creating an Angular application—or make any use of Angular at all, just yet. By the end of this chapter, we'll just have our skin and bones application (as previously mentioned), which we will then be converting into a fully-fledged Angular application.
Let's get started with the minimal, and fastest, way to integrate Bootstrap into our HTML. To use all Bootstrap has to offer, we only need to add resource links to one style sheet, and three JavaScript files.
The following is the HTML code that creates an empty HTML page that demonstrates the bare essentials to wire in Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Chapter 3 - Bootstrap: Responsive Grid Layout &
Components</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous”>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js”
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/
1.12.9/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
js/bootstrap.min.js” crossorigin="anonymous"></script>
</head>
<body>
This page is intentionally blank. It's sole purpose is to show the HTML code that needs to be added to integrate Bootstrap.
</body>
</html>
Following the order of the linked files in the previous HTML code, here are what the one CSS file and the three JavaScript files are for:
- The bootstrap.min.css file is the minified style sheet for Bootstrap, which is where all the default styles are defined
- The jquery-3.2.1.slim.min.js file is the minified JavaScript file containing the jQuery library and is referenced because Bootstrap itself relies on jQuery
- The popper.min.js file is the minified JavaScript file for yet another third-party library called Popper and is referenced because Bootstrap makes use of the functionality therein for its Tooltip components
- And, finally, the bootstrap.min.js file is the minified JavaScript file for Bootstrap itself and is used for various components, such as the modal and drop-down components, which require JavaScript to function
You'll also notice that the links are resources to CDNs (that is, content delivery networks). Although there are other ways of installing Bootstrap in our website, the advantages of using CDNs are threefold:
- We don't need to download and include the files in our web project
- The load time for the clients loading our web pages is minimized on account of the fact that these resources may have already been downloaded to their browsers while visiting other sites before ours
- The servers are optimized for delivering those assets (using caching and other hosting strategies)
We will look at adding our navigation bar on our home page when we take a look at the Navs and the Navbar components later in this chapter.