title: Full-width image inside container in Bootstrap 4
body: <p>I am using Bootstrap 4 and I have a template layout with</p>
  
  <pre><code>&lt;div class="navbar"&gt;
    ...
  &lt;/div&gt;
  &lt;div class="container"&gt;
    {{content}}
  &lt;/div&gt;
  </code></pre>
  
  <p>This works in almost all cases. However, sometimes I want an image in the content to take up the full width, but this is not possible due to the <code>.container</code> which uses <code>left-padding</code> and <code>right-padding</code>.</p>
  
  <p>I could solve this by adding the <code>.container</code> class in each view at the right places instead of in my template layout file, but this will become quite annoying. Especially if I have a CMS where different authors can write articles, and if they want a full-width image in the middle of their article, they have to write raw html to be something like</p>
  
  <pre><code>&lt;div class="container"&gt;
    some text
  &lt;/div&gt;
  &lt;div class="full-width-image"&gt;
    &lt;img src="" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    more text
  &lt;/div&gt;
  ..
  </code></pre>
  
  <p>How could I solve this problem?</p>