Bootstrap for Sass
bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
Please see the appropriate guide for your environment of choice:
a. Ruby on Rails
bootstrap-sass is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the
bootstrap-sass gem, and ensure that the
sass-rails gem is present - it is added to new Rails applications by default.
bundle install and restart your server to make the files available through the pipeline.
Import Bootstrap styles in
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables";;
bootstrap-sprockets must be imported before
bootstrap for the icon fonts to work.
Make sure the file has
.scss extension (or
.sass for Sass syntax). If you have just generated a new Rails app,
it may come with a
.css file instead. If this file exists, it will be served instead of Sass, so rename it:
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
Then, 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.
//= require jquery//= require bootstrap-sprockets
bootstrap should not both be included in
dropdown.js, for example), while
Bower with Rails
When using bootstrap-sass Bower package instead of the gem in Rails, configure assets in
# Bower asset pathsroot.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|config.sass.load_paths << bower_pathconfig.assets.paths << bower_pathend# Precompile Bootstrap fontsconfig.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$)# Minimum Sass number precision required by bootstrap-sass::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
@import statements in
require directive in
Please make sure
sprockets-rails is at least v2.1.4.
bootstrap-sass is no longer compatible with Rails 3. The latest version of bootstrap-sass compatible with Rails 3.2 is v126.96.36.199.
b. Compass without Rails
Install the gem:
$ gem install bootstrap-sass
If you have an existing Compass project:
Install Bootstrap with:$ bundle exec compass install bootstrap -r bootstrap-sass
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
$ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
or, alternatively, if you're not using a Gemfile for your dependencies:
$ compass create my-new-project -r bootstrap-sass --using bootstrap
This will create a new Compass project with the following files in it:
- styles.sass - main project Sass file, imports Bootstrap and variables.
- _bootstrap-variables.sass - all of Bootstrap variables, override them here.
Some bootstrap-sass mixins may conflict with the Compass ones. If this happens, change the import order so that Compass mixins are loaded later.
bootstrap-sass Bower package is compatible with node-sass 3.2.0+. You can install it with:
$ bower install bootstrap-sass
Sass, JS, and all other assets are located at assets.
bower.json main field list only the main
_bootstrap.scss and all the static assets (fonts and JS).
This is compatible by default with asset managers such as wiredep.
If you use mincer with node-sass, import Bootstrap like so:
application.css.ejs.scss (NB .css.ejs.scss):
// Import mincer asset paths helper integration;;
//= require bootstrap-sprockets
See also this example manifest.js for mincer.
d. npm / Node.js
$ npm install bootstrap-sass
By default all of Bootstrap is imported.
You can also import components explicitly. To start with a full list of modules copy
_bootstrap.scss file into your assets as
Then comment out components you do not want from
In the application Sass file, replace
@import 'bootstrap' with:
Sass: Number Precision
Precision is set for Rails and Compass automatically. When using Ruby Sass compiler standalone or with the Bower version you can set it with:
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
To match upstream Bootstrap's level of browser compatibility, set Autoprefixer's
browsers option to:
If you use Sprockets or Mincer, you can require
bootstrap-sprockets instead to load the individual modules:
You can also load individual modules, provided you also require any dependencies. You can check dependencies in the Bootstrap JS documentation.
//= require bootstrap/scrollspy//= require bootstrap/modal//= require bootstrap/dropdown
The fonts are referenced as:
$icon-font-path defaults to
bootstrap/ if asset path helpers are used, and
When using bootstrap-sass with Compass, Sprockets, or Mincer, you must import the relevant path helpers before Bootstrap itself, for example:
Import Bootstrap into a Sass file (for example,
application.scss) to get all of Bootstrap's styles, mixins and variables!
You can also include optional Bootstrap theme:
The full list of Bootstrap variables can be found here. You can override these by simply redefining the variable before the
@import directive, e.g.:
Bootstrap is available as an Eyeglass module. After installing Bootstrap via NPM you can import the Bootstrap library via:
or import only the parts of Bootstrap you need:
Bootstrap for Sass version may differ from the upstream version in the last number, known as PATCH. The patch version may be ahead of the corresponding upstream minor. This happens when we need to release Sass-specific changes.
Before v3.3.2, Bootstrap for Sass version used to reflect the upstream version, with an additional number for Sass-specific changes. This was changed due to Bower and npm compatibility issues.
The upstream versions vs the Bootstrap for Sass versions are:
Always refer to CHANGELOG.md when upgrading.
Development and Contributing
If you'd like to help with the development of bootstrap-sass itself, read this section.
Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.
Note: if you're just looking to use Bootstrap 3, see the installation section above.
Upstream changes to the Bootstrap project can now be pulled in using the
convert rake task.
Here's an example run that would pull down the master branch from the main twbs/bootstrap repo:
This will convert the latest LESS to Sass and update to the latest JS. To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:
The latest converter script is located here and does the following:
- Converts upstream Bootstrap LESS files to its matching SCSS file.
- Copies all upstream font files into
Bootstrap::BOOTSTRAP_SHAin version.rb to the branch sha.
This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).
Please submit GitHub issues tagged with
bootstrap-sass has a number of major contributors: