This blogpost shows how to setup Rails 6 with Bootstrap 4.
This snippet shows a somehow different and less customized approach.
$ rails new rails6-bootstrap4
$ bundle --binstubs
$ yarn add bootstrap jquery popper.js expose-loader
// config/webpack/environment.js
// Make $ available on the window object
// for SJR views and jQuery plugins
// that may expect `$` to be globally available.
environment.loaders.append('expose', {
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery',
},
{
loader: 'expose-loader',
options: '$',
},
],
});// app/javascript/packs/application.js
import $ from 'jquery';
import 'bootstrap/dist/js/bootstrap';
$(document).on('turbolinks:load', function() {
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body',
});
$('body').popover({
selector: '[data-toggle="popover"]',
container: 'body',
html: true,
trigger: 'hover',
});
});// app/javascript/packs/styles.scss
@import '~bootstrap/scss/bootstrap';# config/webpacker.yml
...
extract_css: true# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
...
<body>
<div class='container'>
<%= yield %>
</div>
</body>$ bin/webpack-dev-server
$ bin/rails s
I recently found this article that seems to do the same, but a bit more explanation. Worth reading!
What about Popper?
I found following guide really helpful and it also takes into account to import Popper for Bootstrap 4.
https://www.timdisab.com/installing-bootstrap-4-on-rails-6/
PS: thx for nice and short installation guide @bazzel