CODEWITHSUNDEEP
twitter-bootstrap
yayu
yayu

Reputation: 8088

Bootstrap: wider input field

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.

Upvotes: 66

Views: 145245

Answers (7)

prash212
prash212

Reputation: 1

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.

Upvotes: 0

Brad
Brad

Reputation: 359

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">

Upvotes: 1

LGama
LGama

Reputation: 560

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

Upvotes: 17

user1449337
user1449337

Reputation: 1003

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"

Upvotes: 93

Paito
Paito

Reputation: 1553

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

Upvotes: 2

Andra
Andra

Reputation: 707

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.

Upvotes: 9

ChrisR
ChrisR

Reputation: 14447

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 }

Upvotes: 42

Related Questions