Bootstrap-sass not working within Rails App

css ruby-on-rails sass twitter-bootstrap-3 bootstrap-sass

10,247

Solution 1

Your problem is that your gemfile defines: bootstrap 2.3.2.2, and you are using syntax for bootstrap 3.0.0. Note that the specifier ~> has a special meaning, best shown by example: ~> 2.3.2.2 is identical to >= 2.3.2.2 and < 2.4 (more info here).

CSS overrides anything that was written "before" the latest lines, so when you add the link in your layout, the CSS for bootstrap 3.0.0 overrides anything in your assets pipeline. Everything that continues working in your web app was simply not changed between these versions, everything that stops working was changed.

You can get what you want by using the syntax from the boostrap 2.3.2 refences guide. You will find the default grid system under the scaffolding link.

Solution 2

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?

10,247

Author by

Luigi

Updated on June 14, 2022

Comments

Luigi almost 2 years
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" />
```
Luigi over 10 years

Thanks for the tip - I have added @import "bootstrap"; to my application.css.scss file, and the bootstrap components seem to work everywhere else. I just created this layout and copied the exact layout of another file, which I know works, but when adding in the above div class it doesn't work. It's like whatever version of bootstrap my app is using doesn't allow for that class, but when I put in the link href tag it does.