Intro to Bootstrap
What is Bootstrap?
Bootstrap is a front-end framework that is designed to make UI development easier and faster. Bootstrap consists of pre-built CSS and JavaScript files that can be easily added to a project.
Bootstrap provides you with a CSS-driven grid system that you can use to create responsive, mobile-first layouts. Bootstrap also features a comprehensive suite of User Interface components, styles, and JavaScript plugins that are ready to use via predefined CSS classes.
Bootstrap requires that you compose your HTML markup with some specific structural considerations in mind, and use the predefined Bootstrap CSS classes.
Bootstrap is open source under the MIT license, which means it's free for you to use in both personal and commercial projects. Read the Bootstrap License.
Supported Browsers & Devices
Bootstrap 5 supports the latest stable versions of all major browsers on desktop and mobile. Bootstrap should also work well in alternative browsers that use the latest version of WebKit, Blink, or Gecko. For full details on browser support, see the Bootstrap documentation.
How to Add Bootstrap to your Project
There are several valid ways that Bootstrap can be added to a project, but in this class we will be using the simplest method which is using a CDN (Content Delivery Network).
When using a CDN to load Bootstrap, you do not need to download Bootstrap files.
Please Note: For Capstone we will be managing all of our dependencies, including Bootstrap, using NPM and Webpack.
Starter Template
Links to the Bootstrap CDN files can be found in the official Bootstrap documentation and at BootstrapCDN.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Template Tags in Detail
<html lang="en">
Declares the language of the web page (English in this case). This assists search engines and browsers. Change this if necessary.
<meta charset="utf-8" />
Tells the browser that the page is written in UTF-8 unicode. This is for internationalization.
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the responsive meta tag. This is used to scale and size our content relative to the "viewport" - which is essentially is the visible portion of screen itself. This tag also sets the initial zoom scale to 1:1. This <meta> tag is required when creating a responsive web site.
<!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
This loads our Bootstrap CSS file directly from Stackpath, Bootstrap's preferred Content Delivery Network (CDN). Note the use of Subresource Integrity (SRI) to verify that we are getting the file we want.
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
This is Bootstrap's minified JavaScript file. This is required if you want to use Bootstrap's built-in JS components such as tooltips, pop-overs, modal windows, dropdown menus, and more.