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

User · Answer

in bootstrap 3 0        Set heights using classes like  input-lg  and set widths using grid column classes like  col-lg-     Example    lt div class  row  gt       lt div class  col-xs-2  gt           lt input type  text  class  form-control  placeholder   col-xs-2  gt       lt  div gt       lt div class  col-xs-3  gt           lt input type  text  class  form-control  placeholder   col-xs-3  gt       lt  div gt       lt div class  col-xs-4  gt           lt input type  text  class  form-control  placeholder   col-xs-4  gt       lt  div gt   lt  div gt    Source  http   getbootstrap com css  forms-control-sizes

User · Answer

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    lt input type  text   style  max-width none  important  class  input-medium  gt

User · Answer

Use the bootstrap built in classes input-large  input-medium         lt input type  text  class  input-large search-query  gt   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

User · Answer

I made a wider input field by using either span4 or span6 as class    lt input type  text  class  span6 input-large search-query  gt    This way you don t need the additional custom css  mentioned earlier

User · Answer

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

User · Answer

There is also a smaller one yet called  input-mini

User · Answer

There are various classes for different size inputs    class  gt  input-mini     class  gt  input-small     class  gt  input-medium     class  gt  input-large     class  gt  input-xlarge     class  gt  input-xxlarge

[twitter-bootstrap] Bootstrap: wider input field

Examples related to twitter-bootstrap