title: How to increase the width of search bar in the navbar in twitter bootstrap3
body: <p>I am unable to increase the size of the navbar's search box in twitter bootstrap3. I have tried putting them as grids but even then it didn't work. I can't increase the size of search box with percentage because when seen on mobile devices, the search bar looks too long compared to the rest of the content.
  This is the navbar code i have been using:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default nav-margin-bottom navbar-fixed-top" role="navigation"&gt;
      &lt;div class="row"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header col-md-1"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;a class="navbar-brand" href="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;"&gt;Test&lt;/a&gt; 
        &lt;/div&gt;
        &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
        &lt;div class="collapse navbar-collapse col-md-10"&gt;
        &lt;div class="col-md-5"&gt;
          &lt;form class="navbar-form navbar-left" role="search"&gt;
              &lt;input type="text" class="form-control home-search" placeholder="Search" &gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="col-md-7 navbar-right"&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Abcd&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;&lt;b&gt;Efgh&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li class="dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;b&gt;Ijkl&lt;/b&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;!-- Link or button to toggle dropdown --&gt;
              &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;&lt;b&gt;Mno&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;&lt;b&gt;Pqrs&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;&lt;b&gt;Settings&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;&lt;b&gt;Log out&lt;/b&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/div&gt; &lt;!-- /.row --&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>The navbar looks like this:
  <a href="https://i.stack.imgur.com/4IsY5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4IsY5.png" alt="enter image description here"></a></p>