How to increase the width of search bar in the navbar in twitter bootstrap3

Question

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:

<nav class="navbar navbar-default nav-margin-bottom navbar-fixed-top" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-md-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">
        <form class="navbar-form navbar-left" role="search">
            <input type="text" class="form-control home-search" placeholder="Search" >
        </form>
      </div>
      <div class="col-md-7 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

The navbar looks like this:

possible duplicate of [Bootstrap 3 - How to maximize input width inside navbar](http://stackoverflow.com/questions/18552714/bootstrap-3-how-to-maximize-input-width-inside-navbar) — Bass Jobsen, Sep 24 '13 at 10:46
@BassJobsen But that question solves the problem of fitting the search bar completely in the left over space in between. I want to set the custom width of the search bar, but it should be responsive — harry, Sep 25 '13 at 17:01

score 4 · Answer 1 · edited May 23 '17 at 11:58

The solution from @marvin seems to work (overwrite all) you could make it more responsive by adding media queries like:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { .home-search { width: 400px; }}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { .home-search { width: 600px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { .home-search { width: 800px; } }

The real problem seems the way you use the grid classes to set the widths:

you use:

<div class="collapse navbar-collapse col-md-10">
      <div class="col-md-5">

Due to the nesting the available space for your form become (10/12 ) * (5/12) * 100 = 34% of the viewport. You also use navbar-left for the form which also prevent expanding (due to the width:auto of navbar-form) of the input to the right.

Try to use the grid classes in such way that the columns sum up to 12 for every grid, like

<div class="navbar-header col-sm-1 col-md-1 col-lg-1">Logo</div>
<div class="collapse navbar-collapse">
<div class="col-sm-6 col-md-7 col-lg-8">searchform</div>
<div class="col-sm-5 col-md-4 col-lg-3 navbar-right">Right nav</div>

Resulting in something like:

<nav class="navbar navbar-default nav-margin-bottom" role="navigation">
    <div class="row">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header col-sm-1 col-md-1 col-lg-1">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" style="font-weight:500%; font-family:Roboto; margin-left:18px;">Test</a> 
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse">
      <div class="col-sm-6 col-md-7 col-lg-8">
        <form class="navbar-form" role="search">
            <input type="text" class="form-control" placeholder="Search" >
        </form>
      </div>
      <div class="col-sm-5 col-md-4 col-lg-3 navbar-right">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><b>Abcd</b></a></li>
          <li><a href="#"><b>Efgh</b></a></li>
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Ijkl</b><b class="caret"></b></a>
            <!-- Link or button to toggle dropdown -->
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Mno</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Pqrs</b></a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Settings</b></a></li>
              <li role="presentation" class="divider"></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><b>Log out</b></a></li>
            </ul>
          </li>
        </ul>
      </div>
      </div><!-- /.navbar-collapse -->
    </div> <!-- /.row -->
  </nav>

score 2 · Answer 2 · answered Sep 24 '13 at 13:43

2

Add this class in your main.css and scale the width

CSS

.home-search {
   width: 500px;
 }

answered Sep 24 '13 at 13:43

Marvin

371
1
7

I've tried that already, but it is specific so it is not responsive. – harry Sep 25 '13 at 07:49
And if you use a precentage value? – Marvin Sep 25 '13 at 07:52
Even then, its overshooting the viewport in small screen devices – harry Sep 25 '13 at 11:13

score 0 · Answer 3 · answered May 31 '17 at 17:13

Hi I was currently having the same issue but I figured it out and it worked for me hope it work for you too have a look

<div class="collapse navbar-collapse" id="toggleNavigation">
    <div class="col-sm-5">
        <form class="form" role="search" style="margin-top: 8px;">
            <div class="input-group">
                <input type="search" placeholder="Query?" class="form-control">
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-warning">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </button>
                </span>
            </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
        </ul>
    </div>
</div>

How to increase the width of search bar in the navbar in twitter bootstrap3

3 Answers3