AbuYazan AbuYazan - 9 months ago 46
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>


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.