Bootstrap with rails 6

Question

I'm trying to get bootstrap to work in my rails 6 web application but It won't work. I've followed multiple tutorials on youtube and on here but nothing seems to work. Any help where I might be going wrong will be greatly appreciated.

Gemfile: (First half that includes bootstrap)

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.5' gem 'jquery-rails' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 6.0.2', '>= 6.0.2.2' # Use sqlite3 as the database for Active Record gem 'sqlite3', '~> 1.4' # Use Puma as the app server gem 'puma', '~> 4.1' # Use SCSS for stylesheets gem 'bootstrap-sass', '~> 3.4.1' gem 'sass-rails', '>= 6'

Application.js:

require("@rails/ujs").start() require jquery require bootstrap-sprockets require("turbolinks").start() require("@rails/activestorage").start() require("channels")

Application.scss:

@import "bootstrap-sprockets"; @import "bootstrap";

This is the result when i run it:

hashrocket · Accepted Answer · 2020-03-23 16:49:42Z

I believe in Rails 6, the accepted way to add Bootstrap is through Webpack. You can run yarn add bootstrap jquery popper.js in your terminal. Then, add this to your environment.js file between the existing const and module.exports calls:

const webpack = require('webpack') environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', Popper: ['popper.js', 'default'] }))

Then, in your app/javascript/packs/application.js add this line:

require("bootstrap/dist/js/bootstrap")

And, finally, in your app/assets/stylesheets/application.css add this line:

@import "bootstrap/scss/bootstrap";

This is the most concise (and working!) answer I found after googling for hours. Thank you very much!

Collectives™ on Stack Overflow

Bootstrap with rails 6

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related