DEV Community

loading...
Cover image for Install Bootstrap 5 with Ruby on Rails 6+. Replace Bootstrap 4.

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

yarotheslav profile image Yaroslav Shmarov Originally published at blog.corsego.com on ・1 min read

Version 1 - fast and easy

console

yarn add bootstrap@next
yarn add @popperjs/core
Enter fullscreen mode Exit fullscreen mode

application.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";
Enter fullscreen mode Exit fullscreen mode

Version 2 - with stylesheets

console

yarn add bootstrap@next
yarn add @popperjs/core
Enter fullscreen mode Exit fullscreen mode

application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

application.js

import "bootstrap"
import "../stylesheets/application"
Enter fullscreen mode Exit fullscreen mode

/app/javascript/stylesheets/application.scss

@import "bootstrap"
Enter fullscreen mode Exit fullscreen mode

Version 3 - empty stylesheets

console

yarn add bootstrap@next
yarn add @popperjs/core
Enter fullscreen mode Exit fullscreen mode

application.html.erb

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
Enter fullscreen mode Exit fullscreen mode

application.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";
import "../stylesheets/application"
Enter fullscreen mode Exit fullscreen mode

/app/javascript/stylesheets/application.scss

//
Enter fullscreen mode Exit fullscreen mode

Bonus: Remove Bootstrap 4

console

yarn remove jquery popper.js bootstrap
Enter fullscreen mode Exit fullscreen mode

environment.js - only this:

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

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)

That’s it!

Discussion (0)

pic
Editor guide