How to integrate Bootstrap 4 in Rails 5 without any Gems

Managing the Twitter Bootstrap 4 Library using Node

Some of the steps found in How to install Bootstrap 4 in Rails are manual. I wanted to automate those steps. I also did not want to depend on any gems to minimize dependencies and avoid problems. Create a new Rails 5 project.

rails new bt4a

We will use NodeJS to install everything we need. Create a new directory outside the Rails 5 project directory structure. I have node version 6.9.2 installed on my Mac. Use bower to install Bootstrap 4. You must already have bower installed. Read the Twitter Bootstrap 4 Setup Environment article to learn how.

$bower install bootstrap#v4.0.0-alpha.6

bower bootstrap#v4.0.0-alpha.6  cached https://github.com/twbs/bootstrap.git#4.0.0-alpha.6
bower bootstrap#v4.0.0-alpha.6         validate 4.0.0-alpha.6 against https://github.com/twbs/bootstrap.git#v4.0.0-alpha.6
bower jquery#>=1.9.1                     cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>=1.9.1                   validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>=1.9.1
bower tether#^1.4.0                      cached https://github.com/HubSpot/tether.git#1.4.0
bower tether#^1.4.0                    validate 1.4.0 against https://github.com/HubSpot/tether.git#^1.4.0
bower bootstrap#v4.0.0-alpha.6          install bootstrap#4.0.0-alpha.6
bower jquery#>=1.9.1                    install jquery#3.1.1
bower tether#^1.4.0                     install tether#1.4.0

bootstrap#4.0.0-alpha.6 bower_components/bootstrap
├── jquery#3.1.1
└── tether#1.4.0

jquery#3.1.1 bower_components/jquery

tether#1.4.0 bower_components/tether

Install the Javascript task runner grunt.

npm install -g grunt-cli

Generate the css and javascript by running:

grunt dist

This results in the following error:

Fatal error: Unable to find local grunt.

According to the home page:

Installing grunt-cli does not install the grunt task runner. The job of the grunt CLI is to run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

So in your project folder, install the latest grunt version:

npm install grunt --save-dev

Now run:

grunt dist

This results in the error:

A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started. Fatal error: Unable to find Gruntfile.

Run:

npm init
grunt dist

This results in the same error.

Navigate to bootstrap directory and run, in my case, it is the directory: /Users/bparanj/temp/bt4/bower_components/bootstrap

Run:

npm install

This will succeed because, the directory contains the package.json. Run:

grunt dist

npm hangs. I tried:

npm install -g npm@next

This does not fix the problem. I was not able to run grunt dist due to errors. Let's copy the bootstrap.js to vendor/assets/javascripts and bootstrap.css to vendor/assets/stylesheets. Create the home page controller.

Integrating Twitter Bootstrap 4 CSS with Rails 5

rails g controller welcome index

Change the layout file application.html.erb as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>RubyPlus</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div class="container">
      <%= yield %>
    </div>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </body>
</html>

Add some code to test the Bootstrap 4 in welcome/index.html.erb:

<div class="row">
  <div class="col-sm-12 text-xs-center bootstrap-welcome">
    <h1>Bootstrap 4 Works!</h1>
    <p class="lead">Go ahead and build your awesome app now.</p>
  </div>
</div>

Rename application.css to application.scss and add:

@import "bootstrap";

If you fat-finger the name of the bootstrap files in the vendor directory you will get the error:

File to import not found or unreadable: bootstrap.

Add padding in welcome.scss:

.bootstrap-welcome {
  padding-top: 5em;
}

You will now see some space above the main content as shown in the following screenshot.

Twitter Bootstrap 4

Integrating Bootstrap 4 Javascript with Rails 5

In application.js, add:

//= require bootstrap

to the end of the file. It will now look like this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap

We can test the integration of Bootstrap 4 javascript with Rails 5 by changing the index.html.erb as follows:

<div class="container">
  <div class="row">
    <div class="col-sm-12 text-center bootstrap-welcome">
      <h1>Bootstrap 4 Works!</h1>
      <p class="lead">Go ahead and build your awesome app now.</p>
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
      </button>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Twitter Bootstrap 4

Twitter Bootstrap 4

You can now see the modal window when you click the button. This method does not use any gems and will be able to upgrade to newer versions faster without waiting for the gem authors to update or fix their gems with latest version of Twitter Bootstrap.

Faster Upgrades

If you install gems for integrating Twitter Boostrap latest versing using rails-assets, you will encounter errors like this:

Twitter Bootstrap 4

preventing you from taking advantage of latest version of Twitter Bootstrap library. The ability to upgrade faster means you will be ahead of your competition in terms of getting more traffic due to SEO and providing a great user experience for your customers.

Reference

Twitter Bootstrap 4 Build Tools


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.