AbuYazan AbuYazan - 6 months ago 27
Javascript Question

How to reduce the label font in bootstrap?

I'm using bootstrap to design the form, however I have an issue with the label font (big and bold)
How I can reduce the font and remove the bold? see fiddle

<form class="form-horizontal">
<div class="form-group">
<label for="sel" class="col-md-2 control-label">Selecte:</label>
<div class="col-md-10">
<select id="sel" class="form-control input-sm"></select>
</div>
</div>
</form>

Answer

Try the following code (create a CSS for this):

@media (max-width: @screen-xs) {
    .form-group label{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    .form-group label{font-size: 14px;}
}

.form-group label{
    font-size: 1.4em;
}

Specify the font size that you need. This would alter the font size with window resize. There is no bootstrap class to accomplish this yet to my knowledge.