Differences

This shows you the differences between two versions of the page.

Link to this comparison view

how_to_configure_bootstrap_on_ruby_on_rails [2017/09/05 12:18] (current)
Line 1: Line 1:
 +====== 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 <​nowiki>​GemFile</​nowiki>​
 +
 +Note: We need to disable the **sass-rails** into the <​nowiki>​GemFile</​nowiki>​.
 +<sxh bash>
 +vim Gemfile
 +[...]
 +#gem '​sass-rails',​ '~> 5.0'
 +# Enabling the bootstrap
 +gem '​bootstrap-sass'​
 +gem '​autoprefixer-rails'​
 +# Enaling the modernizr
 +gem '​modernizr-rails'​
 +</​sxh>​
 +
 +Now we need to install the new gems
 +<sxh bash>
 +bundle install
 +</​sxh>​
 +
 +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
 +<sxh js>
 +vim app/​assets/​javascripts/​application.js
 +[...]
 +//= require jquery
 +//= require jquery_ujs
 +//= require turbolinks
 +//= require bootstrap-sprockets
 +//= require_tree .
 +</​sxh>​
 +
 +Now we need to add the bootstrap support into the application,​ let's change the default layout application.html.erb
 +<sxh xml>
 +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>​
 +</​sxh>​
 +
 +If you got some problem with the <​nowiki>​JavaScript</​nowiki>​ file is not compiled you need to configure the following file.
 +<sxh ruby>
 +vim config/​initializers/​assets.rb
 +[...]
 +Rails.application.config.assets.precompile += [/​.*\.js/,/​.*\.css/​]
 +</​sxh>​
 +
 +
 +===== References =====
 +  - http://​getbootstrap.com/​
 +  - http://​api.rubyonrails.org/​