html - Increase width of seach textbox inside navbar-header -

html - Increase width of seach textbox inside navbar-header -

i have search textbox in navbar-header, on collapse, width of textbox fine. in total screen, textbox width reduced. how can increment width in total screen mode?

i know there lot of questions, on , web.

however, have tried suggestions, none has helped me.

here code, can tell i'm doing wrong? thanks.

class="snippet-code-css lang-css prettyprint-override">.navbar .navbar-form { padding: 0 15px; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-inverse { background: #465f62; border: none; } .navbar-inverse .navbar-brand { color: white; font-size: 40px; } .navbar-inverse .navbar-nav > li > { color: white; font-size: 18px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse-area"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">colony</a> <div class="col-sm-6 col-md-6 col-lg-8"> <form class="navbar-form" role="search"> <div class="form-group" style="display:inline;"> <div class="input-group"> <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term"> <span class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </span> </div> </div> </form> </div> </div> <div class="collapse navbar-collapse" id="navbar-collapse-area"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" id="nbacctdd" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">hello doe <span class="caret"></span></a> <ul class="dropdown-menu pull-right"> <li class="dropdown"><a href="#">log out</a> </li> </ul> </li> </ul> </div> </div> </div>

jsbin

because bootstrap(bt) utilize default input width accomplish navbar input. if want redefine width of input, maybe jquery improve choice.

$(window).resize(function (){ var width = $(window).width(); $('input').width(width - 380); })

the number 380 of colony , hello doe width. after all, there plenty space arrangement elements.

html css twitter-bootstrap