Install Bootstrap 5 with Ruby on Rails 6+. Replace Bootstrap 4.

#ruby #rails #bootstrap

console

yarn add bootstrap
yarn add @popperjs/core

application.html.erb

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

create a file /app/javascript/stylesheets/application.scss

Version 1 - with stylesheets

application.js

import "bootstrap"
import "../stylesheets/application"

/app/javascript/stylesheets/application.scss

@import "bootstrap";

Version 2 - empty stylesheets

application.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";
import "../stylesheets/application"

Bonus: Remove jquery (needed for B4 but not B5

console

yarn remove jquery

environment.js - only this:

const { environment } = require('@rails/webpacker')
module.exports = environment

Migrating from Bootstrap 4 with Bootstrap 5

Main changes from my experience:

B4 has badge badge-success. B5 has badge bg-success. navbar dropdowns
.jumbotron removed. use .card + bg-light instead
replace .card-deck with something like row row-cols-1 row-cols-md-2 g-4 or card-group
replace .form-group with mb-3
replace all dropdowns with bootstrap 5 dropdown code, including navbar
left and right replaced with something like start and end, so we would have <ul class="navbar-nav me-auto"> and <ul class="navbar-nav me-auto"> for navbar-end (right) and navbar-start (left)
font-weight replaced by fw