Bootstrap 4 Cookbook: Solutions to common problems faced in Responsive Web Design

To begin, log in to your c9.io account, which will open your Cloud9 IDE dashboard:

Click on Create a new workspace, and a new page will appear with only a few things to fill in. You only need to add the Workspace name and Description, as you like. You can leave the Clone from Git or Mercurial URL empty, as well as leave the default HTML template selected. Finally, click on Create workspace to spin up a new container.

Once ready, you will be greeted with the following tree structure of your folders (displayed in the left sidebar):

The largest window (to the right from the sidebar) will have the README.md file open, but you can open any other file in that area as well. Under this largest window, you will see an open Terminal window (titled "bash - <your-project-name>"), and another tab with the JavaScript REPL.

We will make use of Node and npm to install the latest version of Bootstrap via the command line (the readily open Bash Terminal). Both Node and npm come preinstalled in Cloud9 IDE.

The preceding command shows us that we can either install Bootstrap 3 (latest stable version) or Bootstrap 4 (latest alpha version); we will install Bootstrap 4.

Running the preceding command will almost instantly install the newest version of Bootstrap 4 in our node_modules directory. Inspect the directory's contents with ll (c9), or dir (Windows).

      cd node_modules/bootstrap

      npm install

After running the npm install command, a number of dependencies will be installed, just as listed in the package.json file. The installation will take some time. The reason why it takes so long is mostly due to the installation of the PhantomJS headless browser, which is used for testing in Bootstrap 4.

Once the installation process is completed, you will be greeted with a large number of folders and files. There are about 40 folders inside the node_modules folder. These folders house specific dependencies, such as grunt-sass or eslint. All of these dependencies are located inside the node_modules/bootstrap/node_modules path.

Here is the structure of the files installed using the npm approach:

After the installation is completed, the dist folder contains all the CSS and JavaScript needed to run a website.

All that is left now is to add HTML pages, and correctly reference the styles and scripts from the dist folder.

The process starts similarly to the previous recipe. You begin by clicking on Create a new workspace at the Cloud9 IDE dashboard.

      git fetch

      git checkout v4-dev

Running the preceding command will result in the following notifications in Bash:

         Branch v4-dev set up to track remote branch v4-dev from
         origin. Switched to a new branch 'v4-dev'

In other words, you have now switched to a branch that has the latest installation of Bootstrap 4.

      npm install -g grunt-cli

      npm install

Running the preceding command will install PhantomJS, as well as a number of dependencies. At this point, we have the dist folder available with all the compiled .css and .js files. However, to be able to work with Bootstrap docs, we still need to install Bundler and Jekyll, which is explained in the next recipe.

In order to follow this recipe successfully, you should first install Bootstrap 4 via Git. Thus, this recipe assumes that you have a running environment in Cloud9 IDE, and that you have a complete Bootstrap 4 installation as explained in the previous recipe.

      which ruby; which jekyll

This command will return only the location of Ruby on your VM. Thus, Jekyll needs to be installed.

      gem install bundler

      bundle install

      bundle show jekyll

      bundle exec jekyll serve --host $IP --port $PORT --baseurl ''

Upon running this command, a notification will pop up with a link to preview the running webpage. Click on the link and choose one of the display options:

For this recipe to work, you need to complete the previous two recipes, Installing Bootstrap 4 to c9 IDE using npm and Installing Bootstrap 4 to c9 IDE via git. The following steps will show you how to tweak the look of the docs by changing some of the Sass variables in the scss folder.

      cd && cd workspace/scss && c9 _variables.scss

      // $enable-rounded: true !default;

      $enable-rounded: false !default;

      sass bootstrap.scss ../dist/css/bootstrap.css

This command will recompile SCSS into CSS for Bootstrap docs.

      bundle exec jekyll serve --watch --host $IP --port $PORT --  
      baseurl ''

When you refresh the webpage, it will now show the homepage with the Download Bootstrap button with sharp edges, instead of rounded ones, as seen in the following screenshot:

      $white: #ddd;
      $enable-rounded: false;
      $spacer: 8rem;
      $font-size-base: 2rem;

You should probably make use of your code editor's search and replace function to complete this step. Once you have completed the step, make sure that you save the file.

      sass bootstrap.scss ../dist/css/bootstrap.css

      bundle exec jekyll build; 

      jekyll serve --watch --host $IP --port $PORT --baseurl '' 

This should result in the following changes on the docs website:

To start working on this recipe, we first need to navigate to the workspace folder, and rename the original Gruntfile.js and package.json:

      cd && cd workspace
      mv Gruntfile.js Gruntfile.jsORIGINAL
      mv package.json package.jsonORIGINAL

Now, we are ready to create new versions of these two files and add a custom Grunt task.

      cd && cd workspace
      touch Gruntfile.js package.json

      c9 package.json

      {
        "name": "customGrunt",
        "version": "",
        "devDependencies": {
          "grunt": "~1.0.1"
        }
      }

What are we doing in the package.json file? We are giving our package just some key:value pairs. Specifically, we are giving it a name, a version, and devDependencies. Right now, only the devDependency grunt is listed.

      npm install grunt-contrib-copy --save-dev

Now, we can see that the grunt-contrib-copy plugin has been added to the list of devDependencies in our custom package.json:

      {
        "name": "customGrunt",
        "version": "",
        "devDependencies": {
          "grunt": "~1.0.1",
          "grunt-contrib-copy": "^1.0.0"
        }
      }

More information about this plugin can be found at https://www.npmjs.com/package/grunt-contrib-copy. In a nutshell, this plugin copies files as we specify.

      c9 Gruntfile.js

      'use strict';
      module.exports = function (grunt) {
        grunt.initConfig({
          pkg: grunt.file.readJSON('package.json'),

          // Define the copy task
          copy: {
            main: {
              expand: true,
              src: 'dist/css/bootstrap.css',
              dest: 'copy',
            },
          },
        });

        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.registerTask("default", ['copy']);
      };

      grunt -v

Running the preceding command will create a new folder and will copy the bootstrap.css file in the workspace/copy/dist/css/bootstrap.css

path.

      cd; cd workspace; mkdir GruntExperiment

      mv node_modules/bootstrap/Gruntfile.jsORIGINAL 

         node_modules/bootstrap/Gruntfile.js;

      mv node_modules/bootstrap/package.jsonORIGINAL 
         node_modules/bootstrap/package.json

In this recipe, we have provided some custom code needed for a very simple Gruntfile.js file to work in step 6 . What follows is the breakdown of what the code does.

On line 1, we use the strict mode. On line 3, we call the grunt module. Line 4 instructs grunt to read our package.json file. Lines 7-13 specify the copy task. Line 17 is the entry point that registers the 'copy' task as the default task.

To begin with, all we need to do is make a new project on Cloud9 IDE, without cloning a repository.

      npm install -g bower

      which bower && bower -v

      bower install bootstrap#v4.0.0-alpha.5

      bower list

The preceding command will print out the status of your project's dependencies, including the available update to the currently installed Bootstrap 4 alpha 5.

      cd && cd workspace;
git init

      git add --all

      git commit -m “Add B4, alpha 5”

      bower install bootstrap#v4.0.0-alpha.6

      git diff bower_components/bootstrap/scss/_alert.scss

The preceding command will show us the changes made only in the _alert.scss partial, between Bootstrap 4 Alpha 5 and Alpha 6 versions. In the following screenshot, we can see one of the changes made to this file:

      bower install bootstrap#4.0.0-alpha.4
      git diff bower_components/bootstrap/scss/_alert.scss

With this recipe, we are able to have complete, fine-grained control of observing the changes made to the framework through its versions. This is an amazing approach to understand the changes that occurred to specific components between different versions of the framework. It can help us understand why bugs occurred in our code, avoid pitfalls when working with legacy code, and learn the approaches taken by the Bootstrap contributors and how to better work with Sass in Bootstrap.

Just like the previous recipe, we will make a new project on Cloud9 IDE without cloning a repo.

      npm install -g bower

      which bower && bower -v

      bower install bootstrap#v4.0.0-alpha.6

      cd && cd workspace/bower_components/bootstrap

      npm install

      grunt -v

Now, you can easily reference the dist folder with the necessary styles and scripts for your Bootstrap website to work.