DEV Community

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

Posted on • Originally published at blog.corsego.com on

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

#ruby #rails #bootstrap

console

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

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' %>
Enter fullscreen mode Exit fullscreen mode

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

Version 1 - with stylesheets

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 2 - empty stylesheets

application.js

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

Bonus: Remove jquery (needed for B4 but not B5

console

yarn remove jquery
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)
  • font-weight replaced by fw

That’s it!

Top comments (1)

Collapse
 
ivanz profile image
Ivan Zabrodin •

Though the "loose" option was set to "false" in your @babel /preset-env config