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 s in some browsers, due to the limited stylability of 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