Bootstrap 3, how to reduce text padding in input element?

Question

I am applying Bootstrap 3 style to my edit form. However, I want to reduce the size of the input field and font size.

Because of this, it makes my edit form larger. I tried changing the grid column class (col-sm-, col-md-), but that didn't help.

And also override css , this makes the input field not displaying text.

.form-horizontal .form-group input, .form-horizontal .form-group select, .form-horizontal .form-group label { height: 14px; line-height: 14px; } 

HTML:

 <div class="form-group"> <label for="txtProductName" class="col-sm-2 control-label">Name :</label> <div class="col-md-3"> <input type="text" id="txtProductName" CssClass="form-control"/> </div> </div> 

Answer 1

In general, I do not recommend overriding the sensitive mesh in bootstrap, as this is the main reason for using it!

To override the style of a form, simply use the code below.

HTML

 <div class="form-group"> <label for="txtProductName" class="col-sm-2 control-label">Name :</label> <div class="col-md-3"> <input type="text" id="txtProductName" Class="form-control form-fixer"/> </div> </div> 

CSS

 input.form-fixer { padding: 1px; font-size: 19px; } .form-horizontal .form-group input, .form-horizontal .form-group select, .form-horizontal .form-group label { height: 14px; line-height: 14px; } 

There is also a Jsfiddle. http://jsfiddle.net/ZRosenbauer/4wDKp/