Twitter Bootstrap + Rails, how do you integrate and modify it?

Question

How do you customize something like Twitter Bootstrap in a Rails 3.2 app? I have the gem ('bootstrap-sass 3.0.3.0') already. Do I just get a copy of the Sass files and not use the gem at all? I feel like I am missing something here because I have begun to put !important in the CSS of my code. (I'm just trying to change the color of the navbar into a gradient.)

Is there also a way to not use the entire framework? I feel like I don't use some of the components anyway (both CSS and JS).

equivalent8 · Accepted Answer · 2013-12-12T09:42:18.563

0

in your app/asssets/stylesheets/application.sass

$brand-primary: #829F21 !default
$brand-success: #771965 !default
$brand-warning: #A69E22 !default
$brand-danger:  #d9534f !default
$brand-info:    #5bc0de !default
@import "bootstrap"

list of variables https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/stylesheets/bootstrap/_variables.scss

important thing is to include those variables before you import bootstrap

if you want to import only parts of bootstrap than (like described on the Readme page) include only parts you want

e.g. in app/assets/javascript/application.js :

//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown

edited Dec 12 '13 at 09:42

answered Dec 12 '13 at 09:36

equivalent8

13,754
8
81
109

Man you know what I just had a stupid error, when I was copying the prototype code I copied an older version of _variables.scss, so it was already working. But your answer pushed me in the right direction. Does this apply for the same things such as the jumbotron or other bootstrap CSS components? – Daryll Santos Dec 12 '13 at 09:50
hey dude, don't copy the prototype code, just add `gem 'bootstrap-sass', '~> 3.0.3.0'` to your Gemfile run bundle install, then just add the `@import "bootstrap` into `app/assets/stylesheets/application.sass` (don't forget to remove the app/assets/stylesheets/application.css`) add variables in front of that line, restart server and done... should just work :) – equivalent8 Dec 12 '13 at 14:16
yep, thanks man. I was just wondering if people actually copied the entire code in sometimes, and ignore the gem. apparently not – Daryll Santos Dec 18 '13 at 02:29

score 0 · Answer 2 · answered Dec 18 '13 at 02:31

0

It's just an error on my part. I just didn't copy my code for the static site prototype I built, and I had a copy of _variables.scss in my Rails app. The more you know... T_T

answered Dec 18 '13 at 02:31

Daryll Santos

2,031
3
22
40

Twitter Bootstrap + Rails, how do you integrate and modify it?

2 Answers2