Decrease Twitter Bootstrap input field's height?

Question

In my form I would like to decrease my Input field\'s height.

I know there are input-small, input-medium classes which control input field\'s width, but is there any th

Answer 1

I would suggest learning to use a LESS or SASS compiler for your bootstrap files, and download the LESS/SASS files along with Bootstrap. It's not very difficult and is really the way you are "supposed" to customize Bootstrap. It might be a little heavy-handed for one or two tweaks, but for things like the overall color scheme or grid / input control spacing and padding it really is much better as the LESS variables are universal and might apply to things that you wouldn't think to override. For example, you should be decorating all of your inputs with the "form-control" class. The "form-control" and "output" classes are defined in the file: forms.less, and the height of the field is based on many variables check it out:

.form-control {
  display: block;
  width: 100%;
  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  line-height: @line-height-base;
  color: @input-color;
  background-color: @input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid @input-border;
  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));

  ...more stuff I removed...
  }

All of the variables are defined in a single, easy to work with file, and changes made there affect everything. Here's a sample:

//== Components
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

@padding-base-vertical:     6px;
@padding-base-horizontal:   12px;

@padding-large-vertical:    10px;
@padding-large-horizontal:  16px;

@padding-small-vertical:    5px;
@padding-small-horizontal:  10px;

@padding-xs-vertical:       1px;
@padding-xs-horizontal:     5px;

@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small:         1.5;

@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;

//** Global color for active items (e.g., navs or dropdowns).
@component-active-color:    #fff;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg:       @brand-primary;

//** Width of the `border` for generating carets that indicate dropdowns.
@caret-width-base:          4px;
//** Carets increase slightly in size for larger components.
@caret-width-large:         5px;

If a new version of BS comes out, you simply apply your old variables to the new BS files using the compiler.

Links: http://getbootstrap.com/customize/

http://lesscss.org/

Visual studio users: https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler

Answer 2

I couldn't find any and if there isn't how do I go about overriding the defaults?

Bootstrap's input field height is defined using attribute selectors e.g. input[type="text"], input[type="password"]

You can override it with your styles in the same selector format, or uses classes and such.

.mystyle input[type="text"] {
   height: 14px;
   font-size: 10px;
   line-height: 14px;
}

Answer 3

According to the Bootstrap doc: Bootstrap CSS, you should use .input-sm

If you're going to write your own CSS, you are not really taking advantage of the power of Bootstrap.

<input class="form-control input-sm" type="text" placeholder=".input-sm">

It just changes the height property as mentioned by @Neps

But, I have had to override the .input-sm in my own CSS to get the sizing right.

I just prefer to use the Bootstrap classes where ever possible.

Answer 4

Yes, there are classes for controlling height. You can read about them here.

input-lg
input-sm