Reduce height between components of Bootstrap form

Question

I use Twitter Bootstrap and its form components:

http://twitter.github.com/bootstrap/base-css.html#forms

How to reduce the vertical distance between two components, as well as reduce them?

Example. In the link above in the section "Verification status", how to reduce the gap between the line "input with warning" and "input with error" and how to reduce the height of text input?

Answer 1

If you want to move the label closer to the input, you need to change the width.

.form-horizontal .control-label { width:160px; } 

To change the height of the inputs, you need to change the height property for this selector.

 select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { height:20px; } 

To reduce the height between the lines, you need to change the line border.

 .form-horizontal .control-group { margin-bottom:20px; } 

These are the default styles that are used in bootstrap.css. If you want to override them, I would suggest setting a top-level class on your page. This way you can override the default values ​​without overwriting the bootstrap.css file ...

Answer 2

To check the form, change this rule in CSS

 .form-horizontal .control-group { margin-bottom: 20px; } 

To find them, in Chrome (or Firefox with Firebug), right-click the item in this link above. Select a validation item from the list. Then, in the property inspector that opens (on the element tab, hover over the elements until you find the one that shows the attribute that you want to change. In this case, it was a dive with the “warning of the control group” class. Click this element and on the right from the inspector, he will show you the appropriate CSS rules. Then you can search in your CSS and correct the rules. You can also change it in the inspector and see the result live on the page that you are checking.