Bootstrap 5 ruby gem for Ruby on Rails (Sprockets/Importmaps) and Hanami (formerly Lotus).
For Sass versions of Bootstrap 3 and 2 see bootstrap-sass instead.
Ruby on Rails Note: Newer releases of Rails have added additional ways for
assets to be processed. The
twbs/bootstrap-rubygem is for use with Importmaps
or Sprockets, but not Webpack.
Please see the appropriate guide for your environment of choice:
bootstrap to your Gemfile:
gem 'bootstrap', '~> 5.2.2'
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
// 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.
If you're using Rails 5.1+, you can add the
jquery-rails gem to your Gemfile:
You can pin either
as well as
pin "bootstrap", to: "bootstrap.min.js", preload: true pin "@popperjs/core", to: "popper.js", preload: true
Whichever files you pin will need to be added to
# config/initializers/assets.rb Rails.application.config.assets.precompile += %w(bootstrap.min.js popper.js)
Add Bootstrap dependencies and Bootstrap to your
//= require jquery3 //= require popper //= require bootstrap-sprockets
bootstrap-sprockets provides individual Bootstrap components
for ease of debugging, you may alternatively require
bootstrap for faster compilation:
//= require jquery3 //= require popper //= require bootstrap
If your framework uses Sprockets or Hanami, the assets will be registered with Sprockets when the gem is required, and you can use them as per the Rails section of the guide.
Otherwise you may need to register the assets manually. Refer to your framework's documentation on the subject.
If you are using bootstrap with Rails, autoprefixer is set up for you automatically. Otherwise, please consult the Autoprefixer documentation.
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: