title: How to align button to right in bootstrap 4
body: <p>I tried looking this up here but I can't find anything related to this specific problem.</p>
  
  <p>I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.</p>
  
  <p><a href="https://i.stack.imgur.com/C3XQ9.png" rel="noreferrer">Small window</a></p>
  
  <p><a href="https://i.stack.imgur.com/GEVhJ.png" rel="noreferrer">Large window</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;header&gt;
          &lt;div id="container-fluid"&gt;
              &lt;div class="row"&gt;               
                  &lt;div class=" col-2"&gt;
                      Menu
                  &lt;/div&gt;
                  &lt;div class="col-8 text-center "&gt;
                      Logo
                  &lt;/div&gt;
                  &lt;div class="col-2 float-right"&gt;
                      Contact
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;            
       &lt;/header&gt;
  </code></pre>
  
  <p>What am I missing here?</p>
  
  <p>Thanks in advance.</p>
  
  <hr>
  
  <p>Fixed it, code now looks like this:</p>
  
  <pre><code>    &lt;body&gt; 
      &lt;header&gt;
          &lt;div id="container-fluid"&gt;
              &lt;div class="row"&gt;               
                  &lt;div class="col"&gt;
                      &lt;span class="float-left"&gt;Menu&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="col text-center"&gt;
                      Logo                       
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                      &lt;span class="float-right"&gt;Contact&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;            
       &lt;/header&gt;          
  &lt;/body&gt;
  </code></pre>
  
  <p></p>