I am following the below post to add some css to fieldset and legend in bootstrap.
Use Fieldset Legend with bootstrap
HTML
<fieldset class=" scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label col-xs-6 input-label" for="startTime">Start :</label>
<div class="controls col-xs-6 bootstrap-timepicker">
<input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS
fieldset.scheduler-border {
border: 1px groove !important;
padding: 0 1em 1em !important;
margin: 0 0 0 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.1em !important;
font-weight: bold !important;
text-align: left !important;
width:auto;
padding:0 5px;
border-top:none;
border-bottom:none;
}
Fiddle: http://jsfiddle.net/zpp1u1q5/
Here is how it looks now
How do I change CSS to reduce the reduce H1 and make it equal to H2 ?