title: I can't get Trix Editor to show properly in Bootstrap theme
body: <p>I am trying to setup ActionText for the first time on my <code>Article</code> model.</p>
  
  <p>This is how my <code>Article</code> model looks:</p>
  
  <pre><code>class Article &lt; ApplicationRecord
    has_rich_text :body
  end
  </code></pre>
  
  <p>I set up ActionText like so:</p>
  
  <pre><code>rails action_text:install
  </code></pre>
  
  <p>My <code>app/javascript/packs/application.js</code> looks like this:</p>
  
  <pre><code>// This file is automatically compiled by Webpack, along with any other files
  // present in this directory. You're encouraged to place your actual application logic in
  // a relevant structure within app/javascript and only use these pack files to reference
  // that code so it'll be compiled.
  
  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("channels")
  require("local-time").start()
  
  window.Rails = Rails
  
  import '../src/popper.min'
  import '../src/jquery.min'
  import 'bootstrap'
  // import 'data-confirm-modal'
  
  import '../src/aos'
  import '../src/clipboard.min'
  // many others
  import '../src/theme'
  
  $(document).on("turbolinks:load", () =&gt; {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
  })
  
  import "controllers"
  
  require("trix")
  require("@rails/actiontext")
  </code></pre>
  
  <p>My <code>actiontext.scss</code> looks like this:</p>
  
  <pre><code>//
  // Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
  // the trix-editor content (whether displayed or under editing). Feel free to incorporate this
  // inclusion directly in any other asset bundle and remove this file.
  //
  //= require trix/dist/trix
  
  // We need to override trix.css’s image gallery styles to accommodate the
  // &lt;action-text-attachment&gt; element we wrap around attachments. Otherwise,
  // images in galleries will be squished by the max-width: 33%; rule.
  .trix-content {
    .attachment-gallery {
      &gt; action-text-attachment,
      &gt; .attachment {
        flex: 1 0 33%;
        padding: 0 0.5em;
        max-width: 33%;
      }
  
      &amp;.attachment-gallery--2,
      &amp;.attachment-gallery--4 {
        &gt; action-text-attachment,
        &gt; .attachment {
          flex-basis: 50%;
          max-width: 50%;
        }
      }
    }
  
    action-text-attachment {
      .attachment {
        padding: 0 !important;
        max-width: 100% !important;
      }
    }
  }
  </code></pre>
  
  <p>In my <code>_form.html.erb</code> looks like this:</p>
  
  <pre><code>  &lt;div class="form-group"&gt;
        &lt;%= f.input :title %&gt;
    &lt;/div&gt;
    &lt;div class="form-row"&gt;
        &lt;%= f.rich_text_area :body, class: 'form-control' %&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is the HTML generated:</p>
  
  <pre><code>&lt;div class="form-row"&gt;
        &lt;input type="hidden" name="article[body]" id="article_body_trix_input_article"&gt;&lt;trix-editor class="form-control" id="article_body" input="article_body_trix_input_article" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename"&gt;&lt;/trix-editor&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But when I restart my server and reload the page it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Q8e8j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Q8e8j.png" alt="empty-rich-text-area-body"></a></p>
  
  <p>This is my server log:</p>
  
  <pre><code>Started GET "/articles/new" for ::1 at 2020-04-27 21:19:56 -0500
  Processing by ArticlesController#new as HTML
    User Load (2.7ms)  SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
    Rendering articles/new.html.erb within layouts/application
    Rendered articles/_form.html.erb (Duration: 11.0ms | Allocations: 6694)
    Rendered articles/new.html.erb within layouts/application (Duration: 11.3ms | Allocations: 6789)
  [Webpacker] Everything's up-to-date. Nothing to do
    Rendered shared/_head.html.erb (Duration: 109.1ms | Allocations: 24220)
    Announcement Load (2.0ms)  SELECT "announcements".* FROM "announcements" ORDER BY "announcements"."published_at" DESC LIMIT $1  [["LIMIT", 1]]
    ↳ app/helpers/announcements_helper.rb:3:in `unread_announcements'
  /.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
  /.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
    CACHE Announcement Load (0.0ms)  SELECT "announcements".* FROM "announcements" ORDER BY "announcements"."published_at" DESC LIMIT $1  [["LIMIT", 1]]
    ↳ app/helpers/announcements_helper.rb:3:in `unread_announcements'
  /.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
  /.rvm/gems/ruby-2.7.1@myapp/bundler/gems/gravatar_image_tag-c02351f7d664/lib/gravatar_image_tag.rb:121: warning: URI.escape is obsolete
    Rendered shared/_navbar.html.erb (Duration: 20.8ms | Allocations: 4710)
    Rendered shared/_notices.html.erb (Duration: 0.1ms | Allocations: 18)
    Rendered shared/_footer.html.erb (Duration: 54.0ms | Allocations: 9482)
  Completed 200 OK in 205ms (Views: 195.3ms | ActiveRecord: 5.6ms | Allocations: 47900)
  </code></pre>
  
  <p>What could be causing this?</p>