Every day there’s a new library in the spotlight or maybe just a new version of a really popular one like Bootstrap in this case that doesn’t always have a corresponding ruby gem that you can install into your app yet. So what do you do? Do you sit and wait until someone decides to write one for you?

Bootstrap4

In this article I’m going to help you install the newest version of Bootstrap (version 4.0.0-alpha at the time of this writing) from source into your Rails application. I’m planning to keep the post updated until the stable release comes out. Also, I’m using Rails 4.2.3.

Create a New Rails Project

Let’s create a new Rails project so we have something to add Bootstrap to. I’m using rvm here to isolate my gems and pick one of the many versions of ruby I have installed but you don’t have to. You can use anything you like as long as you have the right version of ruby and you can install ruby gems on your system.

rails new bootstrap4 -B -T
cd bootstrap4
rvm --create --ruby-version ruby-2.2.2@bootstrap4
gem install bundler
bundle

That’s it, you should have a new and shiny Rails app. Note that the -B flag is used to skip the bundle install command after the project is generated and -T is used to skip Test::Unit. Those flags are of course optional, but I usually do it like that so I can add all the gems I need and then run bundle install manually.

Generate the Bootstrap CSS and Javascript Files

Now let’s head over to the official Bootstrap page for the alpha version and download the source files.

Unpack the archive and start the process of generating the css files from the sources. This process will also allow us to generate the documentation locally.

  1. Install Node JS by going to https://nodejs.org
  2. Install grunt-cli by doing npm install -g grunt-cli at the command prompt. Here’s the Grunt CLI homepage if you want to read more about it.
  3. Navigate to the bootstrap folder, in my case it is ~/Desktop/bootstrap-4.0.0-alpha
  4. Install local dependencies by running npm install inside the bootstrap folder
  5. Create a gemset so you can isolate the dependencies with rvm use ruby-2.2.2@bootstrapalpha --create
  6. Install bundler gem install bundler
  7. Install ruby dependencies with bundle install, such as Jekyll and Sass linter
  8. Generate the css and javascript by running grunt dist

You now have everything you need inside the /dist folder (in my case the path is ~/Desktop/bootstrap-4.0.0-alpha/dist. So go ahead and copy /dist/css/bootstrap.css to your Rails app’s /vendor/assets/stylesheets/ folder.

Now let’s create a controller and view so we have something to play with.

$ rails g controller site index
      create  app/controllers/site_controller.rb
       route  get 'site/index'
      invoke  erb
      create    app/views/site
      create    app/views/site/index.html.erb
      invoke  helper
      create    app/helpers/site_helper.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/site.coffee
      invoke    scss
      create      app/assets/stylesheets/site.scss

Let’s also make this new controller action our root route.

# config/routes.rb
Rails.application.routes.draw do
  root 'site#index'
end

Once we have the controller and it’s auto generated view, we can start adding the html markup that bootstrap needs. The first step is to open the application layout, located at /app/views/layouts/application.html.erb and add the example markup from the Bootstrap starter template.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bootstrap4</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div class="container">
      <%= yield %>
    </div>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  </body>
</html>

Let’s also add some content with bootstrap specific markup to our view at /app/views/sites/index.html.erb. That way we can see right away if things are working properly or not.

<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>

Load The Bootstrap CSS

The final step is to load bootstrap in your rails app. To load the css, first rename /app/assets/stylesheets/application.css to /app/assets/stylesheets/application.scss (from .css to .scss so we can use @import). Then replace everything inside /app/assets/stylesheets/application.scss with the following.

@import "bootstrap";
@import "site";

Also let’s add just a little padding inside our /app/assets/stylesheets/site.scss file for some vertical spacing on our page.

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

Go ahead start your rails server with rails s and load your app in the browser by hitting localhost:3000. You should see a page that looks something like this.

Bootstrap 4 Rails Example

Load The Bootstrap Javascript

Loading the Javascript code is very similar to loading the CSS code. We just need to copy the bootstrap.js file from /dist/js/bootstrap.js into our Rails’ /vendor/assets/javascripts/ folder.

Once we have that file, we require it inside our /app/assets/javascripts/application.js by appending //= require bootstrap to the end of the file.

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

Also we want a way to test that our javascript is loading properly so I’ve added a button and some markup for a modal window to our view. The markup is just a copy and paste from the Bootstrap examples page.

<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>

And this is what you should see if everything is working correctly.

Bootstrap 4 Button For Modal

Bootstrap 4 Modal window

Conclusion

You don’t really need to wait for a gem to be updated before you can use a new version of Bootstrap. Of course the gem will make things easier for you as you would have to just copy and paste one line, but it will also mean you won’t understand much of what’s going on under the hood.

I hope this article was helpful in understanding how to integrate any version of bootstrap into your Rails application. Please feel free to ask any questions or share your suggestions on the topic.