How To: Control WHEN a bootstrap 3 'control-label' changes from right to left alignment

Question

I have two rows in a well, each containing a label and a datepicker. I'm telling the labels to stack whenever the form isn't in col-lg-X mode (so, xs, sm, md modes), and to go inline when in col-lg-X mode. And that works, and works great.

Except.

When it stacks at any media size larger than XS (mobile) mode, the labels are right aligned, even though they're stacked. This winds up looking goofy.

The Code:

<div class="row">
    <div class="form-group">
        <label class="col-xs-12 col-lg-5 control-label"><required-Marker></required-Marker> Start Date:</label>
        <div class="col-xs-12 col-lg-7">
            <div class="input-group input-group-sm">
                <input type="text" id="startDate" name="startDate"
                        max="0" min="-732" dateformat="mm/dd/yy"
                        ng-model="vm.startDate"
                        readonly required jqdatepicker
                        changeMonth="true" changeYear="true"
                        style="background-color: white; cursor: default"
                        class="form-control" />
                <label for="startDate" class="input-group-addon clickable" id="btnStartDateIcon">
                    <i class="fa fa-fw fa-calendar"></i>
                </label>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <label class="col-xs-12 col-lg-5 control-label"><required-Marker></required-Marker> End Date:</label>
        <div class="col-xs-12 col-lg-7">
            <div class="input-group input-group-sm">
                <input type="text" id="endDate" name="endDate"
                        max="0" min="-732" dateformat="mm/dd/yy"
                        ng-model="vm.endDate"
                        readonly required jqdatepicker
                        changeMonth="true" changeYear="true"
                        style="background-color: white; cursor: default"
                        class="form-control" />
                <label for="endDate" class="input-group-addon clickable" id="btnEndDateIcon">
                    <i class="fa fa-fw fa-calendar"></i>
                </label>
            </div>
        </div>
    </div>
</div>

Examples of good and bad: Large Screen Width (good!):

Mobile Screen Width (great!):

Medium Screen Width (like iPad in Landscape, 1024 wide) (BAD!):

So, what I need to know is: How can I control WHEN the control-label does the switcheroo from right align to left align? CAN I even control that? And control it responsively. (I was thinking something like 'control-label-lg' with right-align, and 'control-label-md' and below with left-align.)

Answer 1

I think you have to write some css to override the default bootstrap css in your custom css file for responsive. Try to use your parent class.

@media (max-width: 1024px) {
  .your-parent-class .form-horizontal .control-label {
    text-align: left;
  }
}