Bootstrap-sass not working within Rails App

css ruby-on-rails sass twitter-bootstrap-3 bootstrap-sass
Luigi picture Luigi · Dec 24, 2013 · Viewed 10.2k times · Source

I am attempting to contribute to a rails app which has the following in the gemfile:

gem 'bootstrap-sass', '~> 2.3.2.2'
gem 'sass-rails',   '>= 3.2'

It seems like everything works correctly in my layouts with the exception of columns:

<div class="col-md-6"> has no effect whatsoever on the content that it wraps.

However, if I add this line:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

To my <head>, the <div class="col-md-6"> works perfectly but several other bootstrap classes don't work, specifically around the navbar I have in place.

How can I get the effect of the above div class without including the following line?

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

Answer

Joe Saunders picture Joe Saunders · Dec 24, 2013

Did you import the bootstrap mixins? You'd need to add @import "bootstrap/theme"; to your application.css.scss file

Here's a link to that section of the docs.

Also, have you tried the bootstrap-sass-rails gem instead?

Related questions

Proper SCSS Asset Structure in Rails

So, I have an app/assets/stylesheets/ directory structure that looks something like this: |-dialogs |-mixins |---buttons |---gradients |---vendor_support |---widgets |-pages |-structure |-ui_elements In each directory, there are multiple sass partials (usually *.css.scss, but one or two *.…

Read More
How do I use reference images in Sass when using Rails 3.1?

I have a Rails 3.1 project with the asset pipeline working great. The problem is that I need to reference images in my Sass, but Rails calculates image URLs. (This is particularly important in production, where Rails appends the Git hash …

Read More
How can one import only variables and mixins from Sass stylesheets?

I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .…

Read More