title: Setup Bootstrap 4.3 on Rails 6 using Webpack
body: <p>I'm trying to get Rails 6.0.0 and Bootstrap 4.3 to work with webpack.  I tried a few tutorails like this one <a href="https://medium.com/@guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832" rel="nofollow noreferrer">tutorail1</a> and this one <a href="https://gorails.com/episodes/how-to-use-bootstrap-with-webpack-and-rails" rel="nofollow noreferrer">tutorial2</a> but nothing has completely worked.  currently the bootstrap navigation has a black box when hovering over any links, also tooltips and popovers do not work after adding the scripts for them.  </p>
  
  <pre><code>yarn add bootstrap jquery popper.js
  </code></pre>
  
  <p>config/webpack/environment.js</p>
  
  <pre><code>const { environment } = require('@rails/webpacker')
  
  const webpack = require('webpack')
  environment.plugins.append('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  }))
  
  module.exports = environment
  </code></pre>
  
  <p>app/javascript/packs/application.js </p>
  
  <pre><code>require("bootstrap/dist/js/bootstrap")
  </code></pre>
  
  <p>app/assets/stylesheets/application.scss </p>
  
  <pre><code>@import "bootstrap/scss/bootstrap";
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/D69me.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D69me.png" alt="enter image description here"></a></p>