Repository files navigation

Bootstrap 5 ruby gem for Ruby on Rails (Sprockets/Importmaps) and Hanami (formerly Lotus).

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

Ruby on Rails Note: Newer releases of Rails have added additional ways forassets to be processed. Thetwbs/bootstrap-rubygem is for use with Importmapsor Sprockets, but not Webpack.

Please see the appropriate guide for your environment of choice:

• Ruby on Rails 4+ or other Sprockets environment.
• Other Ruby frameworks not on Rails.

Addbootstrap to your Gemfile:

gem'bootstrap','~> 5.3.3'

This gem requires a Sass engine, so make sure you haveone of these gems in your Gemfile:

• dartsass-sprockets: Dart Sass engine, recommended but only works for Ruby 2.6+ and Rails 5+
• dartsass-rails: Dart Sass engine, recommended for Rails projects that use Propshaft
• cssbundling-rails: External Sass engine
• sassc-rails: SassC engine, deprecated but compatible with Ruby 2.3+ and Rails 4

Also ensure thatsprockets-rails is at least v2.3.2.

For wider browser compatibility, useAutoprefixer.If you are using Rails, add theautoprefixer-rails gem to your app and ensure you have a JavaScript runtime (e.g. NodeJS).

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

Import Bootstrap styles inapp/assets/stylesheets/application.scss:

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

The available variables can be foundhere.

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.

Bootstrap JavaScript can optionally use jQuery.If you're using Rails 5.1+, you can add thejquery-rails gem to your Gemfile:

gem'jquery-rails'

Bootstrap tooltips and popovers depend onpopper.js for positioning.Thebootstrap gem already depends on thepopper_js gem.

You can pin eitherbootstrap.js orbootstrap.min.js inconfig/importmap.rbas well aspopper.js:

pin"bootstrap",to:"bootstrap.min.js",preload:truepin"@popperjs/core",to:"popper.js",preload:true

Whichever files you pin will need to be added toconfig.assets.precompile:

# config/initializers/assets.rbRails.application.config.assets.precompile +=%w(bootstrap.min.jspopper.js)

Add Bootstrap dependencies and Bootstrap to yourapplication.js:

//= require jquery3//= require popper//= require bootstrap-sprockets

Whilebootstrap-sprockets provides individual Bootstrap componentsfor ease of debugging, you may alternatively requirethe concatenatedbootstrap 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.

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';