title: Bootstrap 5 setup for Rails 6 without webpacker
body: <p>I am trying to get Bootstrap 5 working with my Rails 6 app. I loathe webpacker (as I failed to get it working when I migrated from Rails 5) and have left my javascript in app/assets/javascripts.</p>
  <p>Bootstrap seems to be only partially working. The code produces rows and columns as expected but is completely unresponsive to the utility spacing classes such as pt-4.</p>
  <p>When I add a link to a CDN in the <code>&lt;body&gt;</code> of <strong>application.html.erb</strong> it starts responding to the spacing classes, but it breaks other styling and the columns don't look right. Taken from <a href="https://getbootstrap.com/docs/5.0/getting-started/download/" rel="nofollow noreferrer">https://getbootstrap.com/docs/5.0/getting-started/download/</a>:</p>
  <pre><code>&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>Can anyone tell me where I've gone wrong?</p>
  <p><strong>app/views/staticpages/home</strong></p>
  <pre><code>&lt;div class=&quot;container-fluid&quot;&gt;
    &lt;div class=&quot;row pt-4&quot;&gt;
  
      &lt;div class=&quot;col-md-2 pt-4&quot; style=&quot;&quot; id=&quot;sidebar&quot;&gt;
        &lt;div class=&quot;list-group&quot;&gt;
          &lt;%= link_to home_path, class: &quot;list-group-item list-group-item-action active&quot;, id: &quot;menu-home&quot; do %&gt;
            &lt;span class=&quot;word&quot;&gt;Home&lt;/span&gt;
          &lt;% end %&gt;
          &lt;%= link_to messages_path, class: &quot;list-group-item list-group-item-action&quot;, id: &quot;menu-messages&quot; do %&gt;
            &lt;span class=&quot;word&quot;&gt;Messages&lt;/span&gt;
          &lt;% end %&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;offset-md-2 col-md-10&quot; id=&quot;main-content&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          .
          .
          .
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>app/views/layouts/application.html.erb</strong></p>
  <pre><code>  &lt;head&gt;
      &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %&gt;
      &lt;%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %&gt;
    &lt;/head&gt;
  </code></pre>
  <p><strong>Gemfile</strong></p>
  <pre><code>gem 'bootstrap-will_paginate'   ,'1.0.0'
  gem 'bootstrap-sass'            ,'3.4.1'
  gem 'bootstrap'                 ,'5.0.1'
  </code></pre>
  <p><strong>app/assets/stylesheets/application.scss</strong></p>
  <pre><code> @import &quot;bootstrap-sprockets&quot;;
   @import &quot;bootstrap&quot;;
   @import &quot;**/*&quot;;
   @import &quot;variables&quot;;
   @import &quot;mixins&quot;;
   @import &quot;custom&quot;;
   @import &quot;font_awesome5&quot;;
  </code></pre>
  <p><strong>app/assets/javascripts/application.js</strong></p>
  <pre><code>//= require jquery3
  //= require jquery-ui
  //= require jquery_ujs
  //= require jquery-fileupload/basic
  //= require jquery.fileupload-process
  //= require jquery.fileupload-validate
  //= require popper
  //= require bootstrap-sprockets
  //= require underscore
  //= require font_awesome5
  //= require useful
  //= require app_stuff
  //= require intlTelInput
  //= require utils
  </code></pre>