Bootstrap Sass with Rails 4 - css

Question

I'm trying to use bootstrap-sass (3.1.0.2) and sass-rails (4.0.1) in my rails (4.0.0) project.
My application.css.scss file looks like this:
/*
* 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.
*
*= require_self
*= require font-awesome
*= require_tree .
*/
My bootstrap_and_overrides.css.scss file is in the stylesheets folder and looks like this:
#import "bootstrap";
I have a test page set up to try it out with this:
<div class="container">
<h2>test terms</h2>
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="bg-primary">.dfd..</p>
<p class="bg-success">..sdfas.</p>
<p class="bg-info">..sdfs.</p>
<p class="bg-warning">.asdf..</p>
<p class="bg-danger">.adf..</p>
<p>test terms</p>
<button type="button" class="btn btn-primary">Default</button>
</div>
<button type="button" class="btn btn-info">Info</button>
When I start the server and visit the page, it renders in plain text without the bootstrap styling.
Any ideas on what to do would be appreciated. It seems a few people on here don't use the gems. Is there a reason for this approach? Thanks very much!

Answer 1

I faced nearly the same problem few days ago. My configuration was quite the same but only few styling effects of Bootstrap were not working (especially the bg-whatever-color). After few gems updated the problem disappear.
Some of my gems that I updated
gem 'rails', '4.0.3'
gem "bootstrap-sass", "~> 3.1.1.0"
gem 'font-awesome-sass'
gem 'sass-rails', '~> 4.0.0'
Don't forget the:
bundle update
Part of my application.scss to give you an idea
*= require jquery.ui.all
*= require select2
*= require font-awesome
*/
#import "mixin_and_var";
// changing the breakpoint value before importing bootstrap style
// This change is made for the menu (navbar) to collapse on tablet for better view
$screen-sm:1024px;
#import "bootstrap";
#import "general_layout";
#import "header";
#import "footer";
#import "menus";
#import "pagination";
#import 'login';
#import "error";
Hope it helps!

Answer 2

Here's my setup with https://github.com/twbs/bootstrap-sass:
# Gemfile
gem 'bootstrap-sass'
# application.css.scss
/*
*= require_self
*= require vendor
* require_tree .
*/
#import "bootstrap";
// Import individual stylesheet
#import "base"; /* app/assets/stylesheets/base.css.scss */
#import "events"; /* app/assets/stylesheets/events.css.scss */
require_tree . is disabled, but importing individual CSS files (base, events) instead.