CODEWITHSUNDEEP
cssbootstrap-4
Daniel Williams
Daniel Williams

Reputation: 2317

Bootstrap left align right-text class on mobile

Using the text-right class on my form labels, when going responsive, I want the label to left align so it's top-left instead of top-right, however the change to text-align:left does not appear to take effect.

@media (max-width: 767px) {
  .form-group > label.text-right {
    text-align: left;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label text-right">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

Upvotes: 1

Views: 3026

Answers (2)

adprocas
adprocas

Reputation: 1913

Note: The accepted answer is best for Bootstrap 4, but the following will work for Bootstrap 3

That's become !important is set on .text-right

You can also set !important. I might suggest not using the .text-right class and maybe make your own. Using !important to override another !important makes me cringe. I wouldn't recommend it, and I would recommend using !important as infrequently as possible. I can understand why Bootstrap uses it here, though.

I'll give you two options.

Here's what you could do:

@media (max-width: 767px) {
  .form-group > label.text-right {
    text-align: left !important;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label text-right">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

Here's what I suggest doing:

@media (max-width: 767px) {
  .form-group > label.align-label {
    text-align: left;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label align-label">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

Upvotes: 4

Carol Skelly
Carol Skelly

Reputation: 362360

Bootstrap's text alignment classes are responsive. You don't need any extra CSS.
Use text-sm-right text-left...

<div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
</div>

Demo: https://www.codeply.com/go/djMd492DHA

Upvotes: 5

Related Questions