13

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>

enter image description here

KyleMit
  • 30,350
  • 66
  • 462
  • 664
Cheung
  • 15,293
  • 19
  • 63
  • 93
  • Why are you using col-*-* outside of the row tag? This can and probably will break the paddings/margins. And why are they set to different screens?(sm and md). – Gherman Feb 08 '16 at 09:32

1 Answers1

14

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/

Michel Ayres
  • 5,891
  • 10
  • 63
  • 97
Rosie
  • 195
  • 2
  • 6
  • 2
    You might want to do a padding: 1px 3px; instead. cause it is a bit too close to left – Dieter Gribnitz Feb 26 '14 at 07:43
  • You can add bootstrap into fiddle without the need to copy and past all boostrap css: [Using twitter's bootstrap in jsFiddle](http://stackoverflow.com/questions/17251586/using-twitters-bootstrap-in-jsfiddle) – Michel Ayres Mar 07 '14 at 20:57