Cannot integrate Bootstrap in my Ruby on Rails (version 4.0.0) app

Question

I have tried multiple methods, followed many tutorials but nothing is taking effect on my Rails application. Here is my Gemfile:

source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
group :doc do
gem 'sdoc', require: false
end

The application.css.scss goes like

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 */
@import "bootstrap-sprockets";
@import "bootstrap";

The application.js file:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .

The index.html.erb file:

<div class="posts index">
    <h1>Welcome to The Incognito Social Network</h1>
    <%=link_to("Say Something!", {:action=> 'new'}, :class=>'action new')%>

    <table class="listing" summary="All posts">
    <% @posts.each do |post| %>
    <tr><td>&nbsp</td></tr>
    <tr>
        <td>Post #<%=post.id%>   </td>
        <td><%=post.text%></td>
        <%if post.image_file_name%>
        <td>
        <%=image_tag post.image.url %>
        </td>
        <%end%>
    </tr>

    <tr>
        <td><%= link_to("Like", '#', :class=>'action upvote')%></td>
    </tr>
    <%end%>
    </table>


</div>

I have tried writing layout false and #layout false in my controllers. None of it takes effect.

The rails app has no change on it. I tried putting bootstrap code in my index.html.erb files but it does not appear with the Bootstrap style. It appears as if its simple HTML. Anybody knows how to fix this? Thanks.

Answer 1

As @vanburen already wrote: You have to add the table class to your table tag.

So replace

<table class="listing" summary="All posts">

with

<table class="table listing" summary="All posts">

Now bootstrap should recognize the table and change it's style.

You will find more information in the Docs .

Happy coding :).

Answer 2

All right, so I installed Node.js and restarted my computer. Moreover here is my updated Gemfile

source 'https://rubygems.org'
gem 'rails', '4.0.0'
gem 'mysql2','~> 0.3.11'
gem 'paperclip', '~>3.0'
gem 'sass-rails', '~>4.0.0'
gem 'bootstrap-sass', '~>3.2.0.2'
gem 'autoprefixer-rails'
gem 'acts_as_votable', '~>0.10.0' 
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'therubyracer', platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 1.2'
group :doc do
  gem 'sdoc', require: false
end

I also figured out that I had to comment out layout false in the controller to get the Bootstrap working. Thank you @Tobias and @vanburen for your help.