Nathan B HankesI've really enjoyed learning the fundamentals of CSS grid and flexbox. Seeing my html design come to life and morph with changes in screen width feels satisfying and, well, like I'm witnessing magic. But before CSS added such mobile-first friendly design features, developers struggled with responsive design. Bootstrap came onto the scene with a responsive component library and drastically improved the quality of life for developers (from what I've been told). With today's CSS, Bootstrap is not entirely necessary, but it can be mighty useful.
According to Builtwith, Bootstrap ran in over 18% of the internet's top one million websites in the year 2018. It's important for those just learning web development to have some familiarization with Bootstrap because chances are we'll run into it at some point in our career. Though it's important to drill the fundamentals of web design early on, there are times where you'll find that Bootstrap is the perfect tool for the job.
You can use Bootstrap to build a quick website prototype. Or use it to quickly add a mobile-friendly component to your project if life got in the way during your latest sprint. Or maybe, as a student, you want to focus on JavaScript in your next project and not get bogged down in design decisions. Bottom line: Bootstrap is a useful option for helping you push more projects over the finish line.
In this tutorial I'll introduce you to Bootstrap and Bootstrap Themes.
What is Bootstrap in 60 seconds or less?
Bootstrap is the world’s most popular front-end component library. A front-end component library is a collection of pre-designed components like buttons, navigation bars, and drop down menus. Bootstrap components are responsive and mobile-friendly. Learn more here.
How to Use Bootstrap
Bootstrap can be downloaded as a dependency through npm, yarn, RubyGems, Composer, and NuGet. Or linked via BootstrapCDN on your index.html file:
In this example, I've copied and pasted the "CSS only" into the head of my index.html file, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap Theme Tutorial</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
Building a Website With Bootstrap
If linking your index.html to Bootstrap, you can copy and paste individual components from the Bootstrap Website or use a website template. The documentation contains the components and you can easily copy the code:
I copied and pasted several of these components into my index.html file until I had something that looked like a website (I added the images for fun):
Make sure your Documentation and the CSS only link are from the same Bootstrap version or your page may not render properly.
What you see is the default colors and design. However, I want a darker colored page. By using a Bootstrap Theme, I can accomplish this with minimum fuss. I'll use a free theme in this example, but there are plenty of premium themes available for purchase.
Downloading and Connecting a Bootstrap Theme
A quick Google search of "free Bootstrap themes" led me to www.bootswatch.com. After scrolling through the free themes, I found one I liked and selected the download:
I'm then prompted to save the file. This file will serve as the CSS style sheet within my project root folder. In this case, I've saved the Bootstrap theme as "default.css":
Now I just need to link the default.css file into the head of my index.html document by typing:
<link rel="stylesheet" type="text/css" href="default.css" />
The html and CSS documents are now talking. When I refresh the browser, the Bootstrap theme is now working:
