Increase the width of the search form

Question

This is only the second time I used stackoverflow, so please forgive me if I am wrong.

I am having a problem increasing the width of the default search form for Bootstrap bootstrap. I tried some of the solutions that I saw on stackoverflow but nothing works.

See: http://jsfiddle.net/94zkLh8j/1/

<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" class="read-more" data-target="#bs-example-navbar-collapse-1"> <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="#">Vouchipster</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <div style="display:table;" class="input-group"> <input type="text" class="form-control" placeholder="Search for retailers, categories or products"> <span class="input-group-btn"> <button class="btn btn-green" type="button"><i class="fa fa-search"></i></button> </span> </div> </div> </form> </div> </div> </nav> 

Answer 1

You can set the width of the input element in the document stylesheet. Use !important to override any bootstrap width. I recommend adding id to the form for easy selection in css

Updated script

HTML

 ... <form class="navbar-form navbar-right" role="search" id="navBarSearchForm"> ... 

CSS

 <style> #navBarSearchForm input[type=text]{width:430px !important;} </style>