title: How can I get a button in bootstrap 4 to float right without leaving the container it's in?
body: <p>I am trying to create a container in bootstrap with a button on the bottom floating on the right. Unfortunately, the button is leaving the div. Why is this happening and how can I prevent this? Here is a copy of the HTML</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;p&gt;
        ... 
      &lt;/p&gt;
      &lt;button type="button" class="btn btn-primary float-right"&gt;Primary&lt;/button&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
    border: 1px solid black;
  }
  </code></pre>
  
  <p>and a plunker: <a href="https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/9DUn1CUj0g6NPhEmqeB9?p=preview</a></p>