Text-Align of a Label only

Question

On a ". cshtml" web page I have several Abels declaring the class horizontal form and the class control-label. By default, these classes align right in my project, ie.. implement the property text-align: right, But I need to change the value of this property only for two cases, and I’m not getting, it has no effect.

What I’ve already tried:

CSS

.form-horizontal .control-label .text-left{
    text-align: left !important;
}

LABEL

    <div class="col-md-6">
        @Html.LabelFor(x => x.observacoes, "Observações Internas:", new { @class = "control-label text-left" })
    </div>

I’ve also tried assigning ID and using "#" in the CSS class, unsuccessfully assigning directly to the component’s HTML attributes, including "! Import" but it didn’t work.

Answer 1

I believe that’s your problem, but if you don’t tell me I remove the answer.

The original Bootstrap CSS class looks like this, note that it is inside a @media, maybe that’s your problem:

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right; /* aqui define o alinhamento */
    }
}

On small screens, smaller than 768px the original style of label mute to:

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

So make sure you’re setting the style in the right place.

That said, I believe you solve your problem like this, create the class .form-horizontal .control-label.text-left in the form below and see if it’s right!

@media (min-width: 768px) {
    .form-horizontal .control-label.text-left {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: left; /* alinhado a esquerda */
    }
}
label.text-left {
    text-align: left; /* alinhado a esquerda */
}