Creating Tesla's Website With Bootstrap 4

After a couple of years in development, Bootstrap 4 is finally here and it brings a lot of cool changes and improvements. The new flexbox core, smarter grid, and fresh component redesigns make the web's most popular CSS frameworks better then ever.

To explore all the new features, we decided to recreate one of our favorite web designs - the landing page for Tesla's Roadster model. In the article below we'll briefly go over some of the more interesting changes we came across.

New Flexbox Utilities

The grid and some other components are now made with flexbox, making the framework's CSS more up-to-date with current code standards. Bootstrap also allows you to quickly turn on the flex mode on any element with the .d-flex class. After that, you can choose from a wide selection of utility classes to control all the different flex properties.

For example, to center the figure element in one of our sections we simply add the justify-content-center and align-items-center classes to the container. This places everything perfectly in the center, both horizontally and vertically.

Grid

Working with the new Flexbox-based grid is also much easier. Most of the time, columns automatically take up the space you have intended them to, without having to explicitly select their size. On smaller screens, they even resize themselves if there isn't enough space for the content.

We also found that the addition of the XL breakpoint is quite helpful. It makes the distinction between laptop screens and large monitors much more clear and easier to work with.

Icon Fonts

Older versions of the framework came with the Glyphicons set built in. Bootstrap 4 removes this dependency but it's really straightforward for developers to pick their own preferred icon font.

For this design we decided to go with the Ionicons font. Installing it is super easy, either by downloading the entire font or by adding a direct CDN link in the page header.

Conclusion

Bootstrap 4 is a major improvement over older version of the framework. With updated styles, more detailed documentation, and many awesome new features, Bootstrap 4 makes building websites easier than ever.

If you haven't checked the framework since Bootstrap 3, we highly recommend you take the new version for a spin.