Bootstrap 5 with Rails 7

Public

Add Bootstrap 5 to Rails 7 app using importmap + link_to (method: :delete) fixed

Used 211 times

• Created by

T Tuyen Pham

Usage

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/V2Gsg9"

Template Source

Review the code before running this template on your machine.

gem 'bootstrap', version: '~> 5.1.3'
gsub_file 'Gemfile', '# gem "sassc-rails"', 'gem "sassc-rails"'
run 'bundle install'

# CSS part
inside('app/assets/stylesheets') do
  run 'mv application.css application.scss'
end

append_file 'app/assets/stylesheets/application.scss', <<-CODE
@import "bootstrap";
CODE

# JS part
append_file 'config/importmap.rb', <<-CODE

pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true
CODE

append_file 'app/javascript/application.js', <<-CODE

import "popper"
import "bootstrap"
CODE

# Initial assets
append_file 'config/initializers/assets.rb', <<-CODE
Rails.application.config.assets.precompile += %w( application.scss bootstrap.min.js popper.js )
CODE

#Fix link_to (method: :delete)
run "./bin/importmap pin @rails/ujs"

append_file 'app/javascript/controllers/application.js', <<-CODE

import Rails from "@rails/ujs"
Rails.start();
CODE

Comments

Juanse

Thanks! It was very useful :)

Tuyen Pham

You are welcome!