title: Bootstrap 4 - how to align one button on the left side and remaining elements on the right side?
body: <p>I need to align the B1 button on the left side and the remaining elements on the right side.</p>
  <p>Here is my code (I'm using Bootstrap 4.1):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;div class="modal-footer"&gt;
    &lt;div class="clearfix"&gt;
      &lt;button type="button" id="b1" class="btn btn-primary float-left"&gt;B1 ACTION&lt;/button&gt;
      &lt;div class="float-right"&gt;
        &lt;button type="button" id="b2" class="btn btn-primary"&gt;B2 ACTION faltas&lt;/button&gt;
        &lt;a href="" id="b3" target="_blank" class="btn btn-primary"&gt;B3 ACTION&lt;/a&gt;
        &lt;button type="button" id="b4" class="btn btn-primary btn-danger"&gt;B4 ATION&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Unfortunately, the code is not working. Any idea how to do it?</p>