What Will I Learn?
This January, Bootstrap 4 (aka v4) finally got released after being in alpha for over two years. It represents a major rewrite. Not only are there a lot of changes under the hood, but there are also a few new concepts you’ll need to wrap your head around.
So in this tutorial, I’m going to explain the most important changes from Bootstrap v3 to v4. I’m assuming that you’ve used Bootstrap previously, so I won’t explain the basics.
#1: Flatter buttons
Let’s begin with a fun and visual one! The buttons in v4 have a flatter design than they did in v3. Here are the previous buttons:
And here are some of the new ones:
This is more in line with more modern design guidelines like those found in Material Design, which has become hugely popular the last couple of years.
#2: The media queries are better
Boostrap v3 had too few breakpoints for its grid, in my opinion, as the lowest one, xs, was at 768 px. A lot of traffic usually comes from screens narrower than that, so this has been frustrating for many developers.
So now they’ve added a new breakpoint, xl. This one takes the role lg used to have, and pushes the rest of the breakpoints downwards, making the range go all the way down to 576 px.
This makes it easier for you to construct grids which work well across all screen sizes.
#3: Flexbox support gives you more flexibility
The famous Bootstrap grids are now created with Flexbox instead of floats. At first sight, this doesn’t make a huge difference for you as a developer, as most grid layouts work exactly the same. However, it does open up a few more possibilities.
Previously, you had to define the width of each column (from 1 to 12). Now you can define the width of one column, and then let the other ones be automatically set by Flexbox.
Here’s an example of doing exactly that:
As you can see in the markup below, we’re only setting the width of the middle column to be 6 (which equals half of the full width) and then the rest of the columns will simply take up whatever space remains.
Flexbox classes
Bootstrap 4 also comes with a bunch of classes you can apply to control both Flexbox containers and items. To turn an element into a Flexbox container, simply give it the class of d-flex.
Which will give you a Flexbox container with text inside it:
Note: I’m only mentioning the Flexbox related styles here.
Let’s also add a few items, and add another class to control how they’ll position themselves in the container.
Which makes the items center themselves in the container:
You can also add classes on the items themselves. Check the Flex section in the docs to learn more about that.
#4: Control spacing with classes
This one is pretty cool. You can now control the padding and margins using the p-* and m-* classes. The range goes from 0.25 rem to 3 rem through applying the numbers from 0 to 5.
For example, let’s give our Flexbox container a p-5 class, in order to create as much padding as possible:
Here’s how that will look
You can also add t, b, r og l if you want spacing on specific sides (top, bottom, right, left), like this:
That will only add padding on the left side, like this:
Note: the original flexbox container actually had a p-2 class by default.
#5: From pixels to rems
Bootstrap 4 has swapped out pixels with relative units of measurements (rems) in all places except media queries and grid behaviours. This means more flexibility and responsiveness, as rem units aren’t absolute, which pixels are.
With rems all font sizes are relative to the root element (the html tag), and by default, 1rem equals 16px. However, if you change the font-size to, say, 50% in the root element, then 1rem will equal 8px throughout the app.
Note that this switch doesn’t mean that you need to use rems when you’re applying your own styles on your website.
#6: Cards replace panels, wells, and thumbnails
Bootstrap also comes with a whole new component called cards, which replace panels, wells, and thumbnails. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
Posted on Utopian.io - Rewarding Open Source Contributors