Question

How can I make the input field wider than the default in Twitter’s Bootstrap?

I am trying to create a wider search form in the hero-unit class from the example.

Answer 1

Use the bootstrap built in classes input-large, input-medium, … : <input type="text" class="input-large search-query">

Or use your own css:

1. Give the element a unique classname class="search-query input-mysize"
2. Add this in your css file (not the bootstrap.less or css files):
   .input-mysize { width: 150px }