Simple SASS based installation guide for Twitter Bootstrap in Rails 4.2

If you are looking for simplest workaround for installing the SASS based Twitter Bootstrap library in your rails app; then you are in the right place. I have written the steps I followed to get my app working with Bootstrap. 

The main twitter guideline is a bit lengthy and if you already have some idea about how this library works; this post is more than enough to install.

Installation

bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications. Asset pipeline makes it easy to get bootstrap-sass working in Rails.

# in Gemfile
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '>= 3.2'

you know how to install the gems;🙂

$ bundle install

now you gonna use SASS’s @import technique to import the library styles in your application’s stylesheet;

in app/assets/stylesheets/application.scss:

@import "bootstrap-sprockets";
@import "bootstrap";
// make sure you import "bootstrap-sprockets" in the first place; other libraries gonna depend on this

to rename the stylesheets/application.css to stylesheets/application.scss

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Notice:

If you follow the https://github.com/twbs/bootstrap-sass you might encounter the statement

remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.

The statement above says that you cannot include/use Bootstrap mixins using traditional `sprocket`’s notations viz. *=require ; However it doesnot mean that you should not use them to require other `.css/.scss` files you create for your app.

Requiring JS files

Require Bootstrap Javascripts in app/assets/javascripts/application.js:

//= require jquery
//= require bootstrap-sprockets

bootstrap-sprockets and bootstrap should not both be included in application.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts

Sources:

https://github.com/twbs/bootstrap-sass

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s