Bootstrap: wider input field
Twitter BootstrapTwitter Bootstrap Problem Overview
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.
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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"
Solution 2 - Twitter Bootstrap
Use the bootstrap built in classes input-large, input-medium, ... : <input type="text" class="input-large search-query">
Or use your own css:
- Give the element a unique classname
class="search-query input-mysize"
- Add this in your css file (not the bootstrap.less or css files):
.input-mysize { width: 150px }
Solution 3 - Twitter Bootstrap
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>
Solution 4 - Twitter Bootstrap
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.
Solution 5 - Twitter Bootstrap
There is also a smaller one yet called "input-mini".
Solution 6 - Twitter Bootstrap
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">
Solution 7 - Twitter Bootstrap
In bootstrap 4, they have designed a bigger input file.
A simple solution to increase the size input file is to use font-size
:
Add you style, for example:
input[type="file"] {
font-size:35px
}
Otherwise, you can make one custom class and add to input control.