title: CSS Bootstrap navbar- center search bar that takes the whole width on collapse
body: <p>I have a bootstrap v.3 navbar with 3 elements in it. I would like to align elements evenly so that the search bar is centred in the navbar. And when it collapses that it takes the full widht. But struggling to do that.</p>
  
  <p>This is the html for it:</p>
  
  <pre><code>      &lt;nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"&gt;
  
          &lt;div class="container"&gt;
            &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
            &lt;div class="col-lg-4 navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;img src="assets/img/logo.png" alt="logo"&gt;
            &lt;/div&gt;
  
            &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
            &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;form class="navbar-form navbar-left navbar-search-form active" role="search"&gt;
                 &lt;div class="form-group"&gt;
                    &lt;input type="text" value="" class="form-control" placeholder="Search..."&gt;
                 &lt;/div&gt;
              &lt;/form&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;
                    &lt;a href="javascript:void(0);"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;button href="#gsdk" class="btn btn-round btn-default"&gt;Sign in&lt;/button&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
            &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
        &lt;/nav&gt;
  </code></pre>
  
  <p>I tried to make a <a href="https://jsfiddle.net/sLeb4v1y/" rel="nofollow noreferrer">fiddle</a> for it, but it didn't turn out good, but hopefully the code there can give some idea.</p>