title: Bootstrap v4.5 Navbar Multiline Alignment and Elements Width
body: <p>After many attempts I am failed to create following layout using Bootstrap v4.5. I want menu button on the left and logo in the centre of the top row. Second row to have full width search textbox with search icon inside the textbox.</p>
  <p><a href="https://i.stack.imgur.com/TQcDj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQcDj.png" alt="enter image description here" /></a></p>
  <p>How to achieve this?</p>
  <p>I was able to layout elements With the help from her <a href="https://stackoverflow.com/questions/48999447/bootstrap-4-navbar-with-logo-and-2-rows">here</a> and <a href="https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div">CSS</a> but having difficulty in aligning as in below screenshot i.e. 1) right div is not aligned horizontally with left and centred div 2) search icon appears above the textbox on the left whereas I am trying to keep it inside the textbox on the right side. reducing textbox width is not helping.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-expand navbar-dark fixed-top bg-dark&quot;&gt;
  &lt;div class=&quot;container bg-warning&quot;&gt;
      &lt;div class=&quot;d-flex flex-column w-100 justify-content-end bg-success p-1&quot; id=&quot;navbarCollapse&quot;&gt;
          &lt;div class=&quot;pt-1 pb-0 px-lg-2 bg-success w-100 text-left&quot; id=&quot;container&quot;&gt;
              &lt;div class=&quot;bg-danger&quot; id=&quot;left&quot;&gt;left&lt;/div&gt;
              &lt;div class=&quot;bg-danger&quot; id=&quot;center&quot;&gt;center&lt;/div&gt;
              &lt;div class=&quot;bg-danger&quot; id=&quot;right&quot;&gt;right&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;pt-1 pb-0 px-lg-2 bg-success w-100 text-left&quot; id=&quot;container&quot;&gt;
              &lt;i class=&quot;fa fa-search &quot;&gt;&lt;/i&gt;
              &lt;input type=&quot; text &quot; class=&quot;form-control &quot; placeholder=&quot;Search &quot; /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>    #container {
      width: 100%;
  }
  
  #left {
      float: left;
      width: 100px;
  }
  
  #right {
      float: right;
      width: 100px;
  }
  
  #center {
      margin: 0 auto;
      width: 100px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ffQjZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ffQjZ.png" alt="enter image description here" /></a></p>