html - bootstrap text align to left -

html - bootstrap text align to left -

i've next code , need align text left

@html.labelfor(model => model.name, new { @class = "control-label col-md-2 oper-label" })

when next working , text align left.

@media (min-width: 768px) { .form-horizontal .control-label { text-align: left; } }

but when seek in sec class not working

.oper-label { font-weight: normal; text-align: left; }

my question following

why sec alternative not working? does first alternative work right way it,maybe there improve way that... when text align left in labels , textboxes there much spaces if want label , text box closer how can ?

edit,

the html code below

<label class="control-label col-md-2 operation-label" for="name"> name</label> <div class="col-md-10"> <input class="text-box single-line" data-val="true" data-val-length-max="30" data-val-regex="invalid provider name" data-val-required="name field required." id="externalname" name="name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span> </div>

you can utilize !important:

.oper-label { font-weight: normal; text-align: left !important; }

but general recommendation when using front-end frameworks (such bootstrap , foundation), create sure custom css rules come after bootstrap or foundation css rules (when linking stylesheet files within page ). way, can override styles needed.

once that, can declare:

.control-label.oper-label { font-weight: normal; text-align: left; }

as spacing issue between textboxes , left-aligned labels, can either add together .col-xs-1 class .control-label or override bootstrap's fixed-width labels , set custom percentage width .control-label:

.form-horizontal .control-label { width: 25%; }

html css twitter-bootstrap