Bootstrap 4 | Digital Phoenix Agency
12 Oct 2016
12 Oct, 2016

With over 120,000 new lines of code, Mark Otto and Jacob Thornton the creators of Bootstrap and the open source community of Bootstrap have pushed Bootstrap 4 well into it's Alpha version. This alpha version is obviously incomplete still and shouldn't be used just yet on production, but it does give us insight into all the cool new things that were added or updated.

What's new?

MOVED FROM LESS TO SASS

Bootstrap has changed its underlying stylesheet preprocessor from Less to SassSass is quite popular among the community of Front-End Developers. For more about Sass you can take a look at my other tutorial about Sass.
 

BETTER GRID

Bootstrap has made more sophisticated improvements to the grid system, but don't worry because the mark-up for creating a grid is essentially the exact the same as what it was in Bootstrap 3. The most significant change in regards to the grid is that they switched from using pixel-based or percentage-based measurements to REM based CSS units, this means that the spacing and the grid itself is dynamic and based on the HTML root of the document.
 

FLEXBOX SUPPORT

Bootstrap has also included flexbox support, which is pretty cool. Flexbox is basically a simple flexible layout option in CSS. It provides alignment of content within a parent element vertically with equal height columns via grid-based layouts.
 

REPLACED WELLS, THUMBNAILS & PANELS WITH CARDS

Bootstrap has totally removed the wells, thumbnails and panels components for a totally new component called cards. Basically, a card is an individual content block that's highly customizable, has a ton of options.
 

REBOOT

Another feature they added to Bootstrap 4 is the Reboot and that's basically their version of the normalize and reset CSS file. The goal of the move was to include all generic CSS selectors and reset styles in a single, easy to use SCSS file.
 

A SINGLE CUSTOMIZABLE FILE FOR SASS VARIABLES

Because we're using Sass they've also added a whole bunch of sass variables in a single customizable file, which basically makes it incredibly easy for you to jump into that variables file and switch and customize almost the entire project super easy without digging through a ton of CSS files.
 

NO MORE IE8!

They've also dropped Internet Explorer 8 like it's hot, so the guys from Bootstrap just decided that they were annoyed and bored with Internet Explorer 8 (like all of us), and just put it on a time out forever, and without IE8 holding them back, basically they can use the best parts of CSS without having to hack it apart in order to compensate such a bad browser. If you really need IE8 support, then just use Bootstrap 3. 
 

Installing Bootstrap 4

Ok, so first thing to do is to go to the documentation page of the Bootstrap's alpha version 4 and click on the Download Bootstrap button, this will automatically take you to the Download section of the docs.Now, there are several ways of doing this:

  • using a CDN (Content Delivery Network).
  • download the entire source files.
  • using Package Managers via CLI (Comand Line Interface).

We're going through each of this in this tutorial.
 

CDN

First, let's install it using CDN. This way we can get up and running really quickly. Go to quick start section and copy and paste the stylesheet link and the script tags right into your HTML file. They've also give us a starter template, that you can just copy and paste it to your HTML file and you'll be good to go, ready to use Bootstrap 4 Alpha, just like that, withing seconds.
 

DOWNLOAD THE SOURCE FILE

Go to download section in click on the Download source button. You're going to get an entire zip folder with all of the stuff, all of the package in one. After unzip the file, you're going to see a whole bunch of stuff that is a little bit daunting looking for some of you, but what you're really only gonna want to concern yourself with what is in the /dist folder. Here you've got the CSS and the JS (also minified versions for both). To include it into your project, simply copy the folders within the /dist folder to your project. So it will look like this:

your-project-name/
index.html
|—— css/
|   |—— bootstrap.css
|   |—— bootstrap.min.css
|—— js/
|   |—— bootstrap.js
|   |—— bootstrap.min.js 

The second thing to do now is to reference them in the index.html file. So it will look like this:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Bootstrap JS -->
<sciprt src="js/bootstrap.min.js"></script> 

If you've downloaded the starter template, you can simply replace the link tag stylesheet in the header and the js script at the bottom of the page, before the closing </body> tag.
 

USING PACKAGE MANAGERS VIA CLI

Another way to install Bootstrap is to use a package manager. I prefer using Bower, that's what I've been using a lot of the time for my personal projects. I'm not going to show you how to use Bower or install it, or how to use the command line, this out of the scope of this tutorial. But if you want to learn how to install and use Bower with the command line, go to the bower.io.

Now open your terminal/CLI and first thing to do is to navigate to your project. When you're in the root of your project simply copy and paste this command bower install bootstrap#v4.0.0-alpha.4 to install Bootstrap. So this will automatically create a bower_components folder where you have a bootstrap and a jquery folder where are all the source files. So it will look like this:

your-project-name/
index.html
|—— bower_components/
|   |—— bootstrap
|   |—— jquery 

So again, now we have to change the reference in the index.html file. It will look like this:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<sciprt src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 

For jQuery, you can use the CDN or you can use the local version installed with Bower:

<!-- jQuery -->
<sciprt src="bower_components/jquery/dist/jquery.js"></script> 

To test all of this, open the index.html file in your browser.

Even though Bootstrap 4 is only in alpha version, it's still really exciting and I can't wait to see what the authors of this great framework will bring to us after the beta version will release.

Ready to get Started?