title: Bootstrap class col-md does not split row as it should
body: <p>im trying to split row (col-md-12 = full width of row) for 3 parts - col-md-8 + col-md-2 + col-md-2, but bootstrap class col doesn't work as it shoud and im getting 3x columns sticked 2 each other :(</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;!-- Bootstrap 4 --&gt;
  &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
  
  
  &lt;!-- Body --&gt;
  &lt;body style="background-color:gray; margin: 0"&gt;
  
    &lt;div class="container-fluid" style="height: 5%; background-color: green;"&gt;
      &lt;div&gt;
        &lt;div class="row form-inline"&gt;
          &lt;div class="col-md-8" style="display: inline-block"&gt;something&lt;/div&gt;
          &lt;div class="col-md-2" style="display: inline-block"&gt;something2&lt;/div&gt;
          &lt;div class="col-md-2" style="display: inline-block"&gt;something3&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I'm getting:<br>
  <a href="https://i.stack.imgur.com/Mobuk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mobuk.png" alt="I'm getting" /></a></p>
  <p>What I want to get:<br>
  <a href="https://i.stack.imgur.com/dkXsp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dkXsp.png" alt="I want get" /></a></p>
  <p>PS:
  I know that i can use style width 70% + 15% + 15% but i think it s not the point of using bootstrap :/</p>