Bootstrap 4 Ruby Gem for Rails / Sprockets and Compass.
CSS Ruby HTML JavaScript

Bootstrap Ruby Gem Build Status Gem

Bootstrap 4 ruby gem for Ruby on Rails (Sprockets) and Compass.

For Sass versions of Bootstrap 3 and 2 see bootstrap-sass instead.


Please see the appropriate guide for your environment of choice:

a. Ruby on Rails

Add bootstrap to your Gemfile:

gem 'bootstrap', '~> 4.0.0.alpha6'

Ensure that sprockets-rails is at least v2.3.2.

bundle install and restart your server to make the files available through the pipeline.

Import Bootstrap styles in app/assets/stylesheets/application.scss:

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

The available variables can be found here.

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 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 and variables.

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

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

While bootstrap-sprockets provides individual Bootstrap components for ease of debugging, you may alternatively require the concatenated bootstrap for faster compilation:

//= require jquery
//= require bootstrap

Tooltips and popovers depend on tether for positioning. If you use them, add tether to the Gemfile:

source '' do
  gem 'rails-assets-tether', '>= 1.3.3'

Then, run bundle, restart the server, and require tether before bootstrap but after jQuery:

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

b. Compass without Rails

Install the gem:

$ gem install bootstrap -v 4.0.0.alpha6

If you have an existing Compass project:

  1. Require bootstrap in config.rb:

    require 'bootstrap'
  2. Install Bootstrap with:

    $ bundle exec compass install bootstrap

If you are creating a new Compass project, you can generate it with bootstrap support:

$ bundle exec compass create my-new-project -r bootstrap --using bootstrap

or, alternatively, if you're not using a Gemfile for your dependencies:

$ compass create my-new-project -r bootstrap --using bootstrap

This will create a new Compass project with the following files in it:

Some bootstrap mixins may conflict with the Compass ones. If this happens, change the import order so that Compass mixins are loaded later.


Sass: Autoprefixer

Bootstrap requires the use of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.

If you are using bootstrap with Rails, autoprefixer is set up for you automatically. Otherwise, please consult the Autoprefixer documentation.

Sass: Individual components

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 _bootstrap-custom.scss. Then comment out components you do not want from _bootstrap-custom. In the application Sass file, replace @import 'bootstrap' with:

@import 'bootstrap-custom';