Resources

Summary

Common


# welcome/index.html.erb
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Webpacker


# Terminal
yarn add bootstrap@next
yarn add @popper/core
rails app:template LOCATION=https://www.rubidium.io/templates/bootstrap-v5/consume

# layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

# javascript/stylesheets/application.scss
@import 'bootstrap'

# javascript/packs/application.js
import * bootstrap from 'bootstrap'
import '../stylesheets/application'

Bootstrap Gem


# Gemfile
gem 'bootstrap', '~> 5.0.0.beta2'

# assets/stylesheets/application.scss
@import 'bootstrap';

# assets/javascripts/application.js
//= require popper
//= require bootstrap

# assets/config/manifest.js
//= link_tree ../javascripts

# layouts/application.html.erb
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

CDN


# layouts/application.html.erb

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

Hotwire


# Terminal
rails new template --skip-javascript
bundle add hotwire-rails
bin/rails hotwire:install

yarn add bootstrap@next

# assets/stylesheets/application.css
*= require bootstrap/dist/css/bootstrap.min.css

# assets/javascripts/application.js
//= require bootstrap/dist/js/bootstrap.bundle

# config/initializers/assets.rb
Rails.application.config.assets.paths << Rails.root.join('node_modules')

# layouts/application.html.erb
<%= javascript_include_tag "application", 'data-turbo-track': 'reload' %>