Bootstrap 3 - reduce the text and field size
I am creating a form in Bootstrap 3. Would like to have the input fields and label surrounding them to appear smaller than what bootstrap provides by default.
In order to do so, I have created a couple of css classes
however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field (<label> tag) appears mis aligned.
Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/
How can I correct this?
In order to do so, I have created a couple of css classes
.input-field {
height: 20px
}
.label-size {
font-size: 10px;
line-height: 1.2;
}however, this has messed up the alignment for checkboxes. The label for each checkbox does not appear properly aligned with the checkbox and also the label for the field (<label> tag) appears mis aligned.
Here is the fiddle - https://jsfiddle.net/yyky0ms1/1/
How can I correct this?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
The best way to not brake other labels is to add a new class name to your effort one, for example:
And this add some extra css for this new class:
Hope this helps.
<label class="col-xs-4 label-size custom-label">Effort</label>And this add some extra css for this new class:
.custom-label {
line-height: 3.3em !important;
}Hope this helps.
ASKER
Updated fiddle - https://jsfiddle.net/yyky0ms1/5/