Creating a website from scratch can take a lot of work and require a working knowledge of HTML, CSS, and maybe some JavaScript. But with Bootstrap, the amount of work and prior knowledge is reduced.
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:
There are also some optional JavaScript libraries if we want to add some interactivity to our website and these are inserted at the end of our <body> element. Check out Bootstrap’s Getting Started documentation for more insight. We’ve also added the optional JavaScript links in the code editor.
If you’re ready, strap on those boots and let’s get started!
Instructions
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 <head> element:
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!