CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
NickG
NickG

Reputation: 9812

How can I align a form label to the right of the control in Bootstrap 4?

How can I align a form label to the right of the form control in Bootstrap 4.0, as per the "rooms" or "people" labels below:

enter image description here

Using the code below, it just comes out underneath:

<div class="form-group">
    <label for="roomsno">meeting rooms required</label>
    <input type="textbox" id="roomsno" class="form-control col-md-4" type="number" />           
    <span>rooms</span>      
</div>

Here is my current code as a JsFiddle:

http://jsfiddle.net/nmg196/b4nqd5a6/4/

Upvotes: 2

Views: 2386

Answers (3)

saidutt
saidutt

Reputation: 289

So.. there are a lot of ways to do that. The one which I think better suits here is

add display: flex to the css for form-group class

For your jsfiddle example

<div class="form-group">
      <label>number of delegates</label>
      <div class="form-group1">
        <input type="textbox" ID="e1" class="form-control col-md-2" type="number" />
        <span> people</span>

      </div>
    </div>

CSS : 

    .form-group1 {
      display: flex
 }

Upvotes: 2

saidutt
saidutt

Reputation: 289

Add ml-auto to the label class attribute 

<label class=“ml-auto”>

Upvotes: 0

Er Jainam Shah
Er Jainam Shah

Reputation: 74

You need to add a text-align: leftstyle to .control-label.

Because bootstrap gives labels within horizontal forms the text align style using the selector .form-horizontal .control-label, you need to use the same or a more specific selector:

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

OR

Just add inline style="text-align: left" to your label.

Use "!important", if you need it to overwrite some default style to this.

Thanks!

Upvotes: -1

Related Questions