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

Question

I apply the Bootstrap 3 style to my edit form. However, I want to reduce the padding of the input box and font-size.

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

And also override the css, it make the input box doesn't show the 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

Overall I do not recommend overriding the responsive grid in bootstrap as that is the main reason to be using it!

To override the form styling just 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;
}

Also have a Jsfiddle set up.... http://jsfiddle.net/ZRosenbauer/4wDKp/