CODEWITHSUNDEEP
htmlbootstrap-4
mariusz2108
mariusz2108

Reputation: 881

Bootstrap align to right with form-inline in row

How it is:

enter image description here How it should be:

enter image description here

Currently second component is pushed to right however its content is aligned to left. I tried to add float-right class but it doesn't work.

<div class="container">
  <form class="form-row">
    <div class="col-md-3">
     Some component here
    </div>
    <!--Content of this element should be aligned to right-->
    <div class="col-auto ml-auto">
      <div class="form-inline">
        <label>Some label</label>
        <input class="form-control" readonly>
      </div>
      <div class="form-inline">
        <label>Other longer label</label>
        <input class="form-control" readonly>
      </div>
    </div>
  </form>
</div>

Upvotes: 3

Views: 3384

Answers (1)

mariusz2108
mariusz2108

Reputation: 881

I have added style="display: flex; justify-content: flex-end" to following element <div class="form-inline"> and it worked how I want.

Upvotes: 7

Related Questions