Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Installing Bootstrap 4 Tutorial

By Gary simon - Jun 07, 2017

Note:
This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning!

Like other similar frameworks, you're able to install a Bootstrap 4 project through various methods. Some are quick and dirty, while the most preferable method takes a bit more time. 

The key difference between each of these methods is the time it takes to get started, versus file size and loading time. There are some other differences that we will take a look at shortly.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more awesome design and development videos.

The Quickest Way to Install Bootstrap 4

This method is ideal when you're working on a prototype or wireframe. It allows you to quickly and easily get up and running with Bootstrap 4 by simply copying and pasting literally 4 lines of HTML onto a page.

The downside to this method is lack of customization options -- as it's strictly CSS and not Sass -- and load times. When you use this method, you're importing the entire Bootstrap library, which is almost always unnecessary. This results in unnecessary file sizes, thus longer load times.

Still, if you're working on a prototype or a project where load time isn't a factor, this is the quickest way to get started.

Assuming you have an HTML page, you simply copy and paste the following line between the <head> tags:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Then, you include the necessary Javascript includes just before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

And that's it. You're now able to write HTML and harness the power of Bootstrap 4.

In this course however, we will not use this method. We're going to set up a more robust development environment and use the Sass version of Bootstrap 4.

 Installing Bootstrap 4 with a Package Manager

Bootstrap 4 comes in 2 flavors: straight up CSS (which is what the CDN uses), and Sass. Sass is a preprocessor that allows you to write more dynamic CSS. It then takes this Sass CSS and compiles it down to standard CSS.

Bootstrap 4 Sass also allows you to make more customizations, and choose which elements of the Bootstrap 4 framework you would like to include based on your project's needs. This ultimately leads to a reduced file size, which is necessary for your website's or app's performance.

A popular package manager is NPM or Node Package Manager. You will need to install Node.js, which includes the Node Package Manager.

Visit Node.js and download the necessary files based on your OS, and then install it.

Once installed, open up the command line / console, and type:

> npm -v

It should provide you with a version number. If so, you're ready to proceed by creating a new folder and installing Bootstrap 4.

> mkdir gamelayout
> cd gamelayout

Here we've created a new folder and we're hopping into it. Now, let's type npm init to create a package.json file:

> npm init

<!--
This utility will walk you through creating a package.json file.            
It only covers the most common items, and tries to guess sensible defaults. 
                                                                            
See `npm help json` for definitive documentation on these fields            
and exactly what they do.                                                   
                                                                            
Use `npm install <pkg> --save` afterwards to install a package and          
save it as a dependency in the package.json file.                           
                                                                            
Press ^C at any time to quit.                                               
name: (gamelayout-pre)                                                      
version: (1.0.0)                                                            
description:                                                                
entry point: (index.js)                                                     
test command:                                                               
git repository:                                                             
keywords:                                                                   
author:                                                                     
license: (ISC)                                                              
About to write to C:\Users\gary\code\gamelayout\package.json:           
                                                                            
{                                                                           
  "name": "gamelayout",                                                 
  "version": "1.0.0",                                                       
  "description": "",                                                        
  "main": "index.js",                                                       
  "scripts": {                                                              
    "test": "echo \"Error: no test specified\" && exit 1"                   
  },                                                                        
  "author": "",                                                             
  "license": "ISC"                                                          
}                                                                           
                                                                            
                                                                            
Is this ok? (yes)  
-->                                                         

Upon entering the npm init command, you will be prompted with the above screen. Just hit the enter key through all of the questions.

The package.json file this command creates serves as a configuration for your project. When we install Bootstrap 4 for instance, it will add the package name along with the version to this file. That way, in the future, if you need to install this project on another environment, you can run npm install and it will download all of the necessary packages based on this file.

Now, let's install Bootstrap 4 with the npm install command:

> npm install bootstrap@4.0.0-alpha.6 --save

Note: At the time of writing this tutorial, bootstrap is currently in Alpha 6. If you're reading this at a later date and this version number has changed, notify me in the comments and I will update this tutorial.

Once this command is finished downloading and installing Bootstrap 4, there will be a new folder called node_modules within our project folder.

Inside, it will contain 3 folders:

  1. /bootstrap which contains the CSS and Sass version of our files.
  2. /jquery which is used by Bootstrap in various components.
  3. /tether which is a library for element positioning.

Each of these folders must be added to our project, but we don't currently have a project to work with. Let's remedy that.

Creating the Development Environment

We already have a project with Bootstrap integrated. Let's create a more robust environment that we can use while we work on our Boostrap 4 project.

In the project root folder, create a new folder called src. Inside of this folder, create the following folder structure:

/src
   /assets
   /css
   /js
   /scss
  • /assets will contain our graphics. To access the assets you will need to follow along with this tutorial and this course, please visit the course page and download the project files.
  • /css this is the folder where the compiled CSS will reside.
  • /js this will house the minified bootstrap, tether and jquery files.
  • /scss this is where our custom Sass will reside.

Inside of the /src folder, create a new file called index.html and paste the following contents:

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <title>AWESOME-GAME ///</title>
        <meta http-equiv="x-ua-compatible" content="ie=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
        <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/bootstrap.css">
        <link rel="stylesheet" href="/css/style.css">
    </head>

    <body>
        <script src="/js/jquery.min.js"></script>
        <script src="/js/tether.min.js"></script>
        <script src="/js/bootstrap.min.js"></script>
    </body>
</html>

After saving, if you were to visit this file in the browser, you would be met with a bunch of errors. There's currently nothing in the /css and /js folders, which we will solve momentarily.

You may also notice two other link elements that are referencing a Raleway Google font, and FontAwesome.

For our project, we're going to use Raleway as it's my personal favorite, and also FontAwesome for a few icons.

Next, create a style.scss file inside of the /src/scss folder. Paste the following Sass inside of it:

$bg-color: blue;

body {
    background: $bg-color;
}

 

Using Gulp with Bootstrap 4

Gulp is a javascript task runner which will help us solve the empty folder issue, along with sass compiling and live browser reloading.

To get started, we first have to install Gulp with NPM and a few other packages.

In the console within the project folder, type:

> npm install gulp browser-sync gulp-sass --save-dev

This will install 3 different packages:

  1. gulp which is our task runner.
  2. browser-sync which will setup a static server and allow us to designate when the browser reloads as we save files.
  3. gulp-sass which will compile our .scss files into .css files.

--save-dev will save these packages as development dependencies.

Now, again, all this command does is place a bunch of folders inside of the node_modules folder. To use gulp, we have to create a gulpfile.js file in the project's root.

Paste the following contents inside of gulpfile.js:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

We first create variables that import the packages that we installed. 

Beneath this, we have to create a series of tasks which will define our gulpfile. Each task has a specific purpose based on the needs of our project.

So, we need to run sass on our Bootstrap 4 files to convert them to regular css files, right? Let's create a task for that. 

Update our gulpefile.js :

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

We create a task called sass, and inside of it, we have to tell it the src of these sass files. If you only had 1 sass file, you could omit the array brackets, but we have 2 so we keep them. We first take the bootstrap.scss file in the node_modules folder, and then any * .scss file inside of our /src/scss folder.

Then we use the pipe method to pass in our sass variable. This is where it transforms the sass files to regular CSS.

Then we use gulp.dest to designate the folder in which these new css files will be placed.

And then finally we use browserSync.stream() to notify the browser.

Now, we also need another task for handling the required javascript files.

Update our gulpefile.js :

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/tether/dist/js/tether.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

We create a task called js and simply move the three required javascript files into our src/js folder. Simple enough.

Let's also create a serve task and a default task. Once again, update your gulpfile.js :

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/tether/dist/js/tether.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./src"  
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['js','serve']);

The serve task passes in the sass task that we created earlier. Inside of it, we use browserSync.init to designate a folder for the static server that we can access in the browser.

Then, we use gulp.watch our sass and html file(s) upon changes. If they change, the browser will reload via browserSync.

That's our gulpfile.js !

On the command line, run:

> gulp

This will load a browser at http://localhost:3000 and the background should be entirely blue.

If you visit the css, and js folders within the /src folder, you will see they're now populated with the files that are referenced in our index.html.

Conclusion

Now you're ready to begin developing and learning how to use Bootstrap 4! In the next lesson, you will learn how to make sass-specific customizations when working with Bootstrap 4.

Note:
This tutorial is a part of our free course Learn Bootstrap 4 by Example. Check it out and join in from the beginning!


Share this post




Say something about this awesome post!