By the end of this chapter, you should be able to:
Twitter Bootstrap is a CSS framework built and maintained for free by Twitter. What does this mean? Put another way, it's a collection of style rules and additional tools to help build responsive layouts faster. There are plenty of CSS frameworks out there, but Bootstrap is one of the most popular ones. However, many frameworks have very similar offerings, so once you are comfortable with one it is not very difficult to pick up another.
You can include Bootstrap quite a few ways: you can download the code, use a CDN, or use a package manager (e.g. npm/bower) to install it. For now, we will be using the CDN as it is the easiest way to get started. If you head to http://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn, you can copy and paste the CDN
link tag into your HTML file and you will have Bootstrap right away! (For now, you don't need to worry about the
You've probably noticed that the
link tag you copy from the Bootstrap site has some attributes we haven't seen before:
crossorigin. These attributes provide a layer of security when requesting files from a CDN, through a feature called Subresource Integrity. The details aren't too important, but if you're curious you can head to the MDN docs to learn more.
As an aside, wondering what a CDN is? CDN stands for Content Delivery Network, and it's essentially a network of servers that are used to deliver content to users around the globe. Having a network of servers makes that delivery faster, because you can deliver content from whichever server is geographically closest to the user. It also provides a safeguard in case one of the servers goes down. Want to learn more? Let us google that for you!
Also, note that the link we're using is for version 4 of Bootstrap. This version was released as a beta in August of 2017. There are a number of changes between version 4 and version 3, so it's important to be aware of which version of Bootsrap you're using.
We'll be working with version 4 throughout this tutorial. If you're working through a tutorial based on version 3, or if you're just curious about the differences, you can take a look at the version 3 documentation here.
When you're ready, move on to Layout