How to configure Bootstrap on Ruby on Rails

Hello guys, so here I will show you all how to configure the Ruby on Rails to use the Bootstrap.

The first step is enable the new gems in the GemFile

Note: We need to disable the sass-rails into the GemFile.

vim Gemfile
[...]
#gem 'sass-rails', '~> 5.0'
# Enabling the bootstrap
gem 'bootstrap-sass'
gem 'autoprefixer-rails'
# Enaling the modernizr
gem 'modernizr-rails'

Now we need to install the new gems

bundle install

Now we need to enable the Bootstrap javascript into the application.js

Note: The Bootstrap needs to be after the jquery files because they are dependence of the Bootstrap

vim app/assets/javascripts/application.js
[...]
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

Now we need to add the bootstrap support into the application, let's change the default layout application.html.erb

vim app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Boostrap Default Layout</title>
  <%= stylesheet_link_tag    :application, media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag :modernizr %>
  <%= csrf_meta_tags %>
</head>
<body>
<div class="container">

  <!-- Hash Flash -->
  <% if notice %>
      <p class="alert alert-success"><%= notice %></p>
  <% end %>
  <% if alert %>
      <p class="alert alert-danger"><%= alert %></p>
  <% end %>
  <!-- End Hash Flash -->

  <!-- before yield -->
  <%= yield %>
  <!-- after yield -->

</div>

<%= javascript_include_tag :application, 'data-turbolinks-track' => true %>
</body>
</html>

If you got some problem with the JavaScript file is not compiled you need to configure the following file.

vim config/initializers/assets.rb
[...]
Rails.application.config.assets.precompile += [/.*\.js/,/.*\.css/]