Rails 6 and Bootstrap 4

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!

bazzel/README.md

radubogdan commented Aug 25, 2020 •

edited

Loading

bazzel/README.md

radubogdan commented Aug 25, 2020 • edited Loading

radubogdan commented Aug 25, 2020 •

edited

Loading