Bootstrap: wider input field

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

There are various classes for different size inputs

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

Answer 2

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 }

Answer 3

in bootstrap 3.0 :

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Example:

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

Source: http://getbootstrap.com/css/#forms-control-sizes

Answer 4

I made a wider input field by using either span4 or span6 as class.

<input type="text" class="span6 input-large search-query">

This way you don't need the additional custom css, mentioned earlier.

Answer 5

There is also a smaller one yet called "input-mini".

Answer 6

I am going to assume you were having the same issue I was. Even though you specify larger sizes for the TextBox and mark it as important, the box would not get larger. That is likely because in your site.css file the MaxWidth is being set to 280px.

Add a style attribute to your input to remove the MaxWidth like this:

<input type="text"  style="max-width:none !important" class="input-medium">