Bootstrap is a CSS library that allows you to quickly make your front end look pretty 🌈. It was built by Twitter so you'll notice that many of the components in Bootstrap (like the buttons) look like components on Twitter itself.
The crux of Bootstrap is that it's a plain old CSS stylesheet already written for us! We can chuck it into cleancss to actually get something readable or we can just read the docs to learn about how to apply some of these rules.
You insert the tag into the head like a normal external stylesheet. It's also outlined in the Bootstrap getting started docs.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>Last week we used flex box to make the JSON data we accessed from the Pokemon API responsive / look pretty. This is a good way of going about making something responsive and if you're comfortable with concepts like flex box or CSS grid; I highly recommend using pure CSS (no library) for responsiveness. However, if you're on a super tight deadline and you just need to ship something quickly the Bootstrap grid system (and Bootstrap in general) is a nice fallback.
Bootstrap grid is actually built with flex box. The beauty of it is that it allows us to not worry about things like media queries. We can simply just chuck in the classes bootstrap gives us and get back something responsive.
Let's do a quick code along! We'll build a set of boxes that take up a certain amount of space across a row. Kind of like this example in the Bootstrap docs.
Bootstrap grid is built with the idea that there are 12 columns spaced across a page. The rule .col means take up an automatic amount of space across the 12 columns. .col-6 means take up 6 columns across the 12 column space. col-sm-6 means take up 6 columns only on a small ipad style device.
Apply what you've just learnt to this challenge.
Like I mentioned Bootstrap is great for getting something styled fast but if you have the time (or the JavaScript knowledge) pure CSS and JavaScript is almost always a better option.
Ooops I've just mentioned JavaScript. Well you guessed it; Bootstrap comes with it's own custom JavaScript library as well. You can import it within the script tags at the bottom of the <body>. There's a list of what components JavaScript actually impacts on.
Now I'll quickly talk about the bad parts of Bootstrap. The problem is that Bootstrap often comes with defaults (like certain padding or margins) that you don't want because it doesn't fit your design and or it overrides what styles you already have in your stylesheet. You can obviously override the defaults that come with Bootstrap but it can be a pain in the ass to do so.
I mentioned that components word above. The good part of Bootstrap is that it's components library is excellent, especially for certain components that are annoying to style with CSS and JavaScript. These include things like carousels, dropdowns, and modals. You can just read the docs, chuck the Bootstrap code in and bang you're sorted 💥 .
The Bootstrap component that I can almost guarantee that you would have seen used somewhere out in the wild is the form. It's used everywhere. It looks good and it works; but because it's so overused now it's kind of unoriginal (imho).
Alas, it's a great skill to know about how to create a Bootstrap form... so let's do a code along 👩💻.
Implement bootstrap grid system to recreate the responsive behaviour for this website. Beast mode: use the bootstrap navbar component to quickly build a navbar similar to the one on the site.
Create a bootstrap form that takes a pokemon name as an input. Using what we learnt last week (fetch, .then) hit the Pokemon API and get back one Pokemon object. Append details about that one Pokemon to the DOM (moves, abilities, height, weight etc) just below the form.