Bootstrap is a framework of readily available code that integrates with HTML to create stylized websites that adapt the layout to users’ screen sizes. This framework allows us to cut down on the time needed to style a website, simplifies the complexity of how to layout elements, works across multiple browsers, and reduces the frustration of using plain CSS. All it takes to use Bootstrap is a few additional lines in our HTML document.
In this lesson, we’ll be working with Bootstrap 4. To incorporate Bootstrap into a project, we have to include two
<meta> tags and the Bootstrap CSS library. In the example below, Bootstrap is linked via Content Delivery Network (CDN) in the
<head> element, like so:
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS for styling and layout--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head>
If you’re ready, strap on those boots and let’s get started!
Look over the structure of the HTML document in the code editor and take notice of the
<meta> tags in the header and the
<script> elements at the bottom of the
<body>. We’ve also included elements that use Bootstrap’s styling and layout, but we haven’t added in the link to Bootstrap’s CDN.
Paste the following line of code inside the
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Once you finish, notice how Bootstrap transforms the webpage! Go ahead resize the browser bigger and smaller to see how Bootstrap displays content on different sized screens!