Question 61336 in Twitter Bootstrap Question posted in

Aligning Twitter Bootstrap inline form group to the right?

I have the following markup.

<div class="row">
    <div class="col-md-6">
        <h4>Title</h4>
    </div>
    <div class="col-md-6 form-inline">
        <div class="form-group">
            <label for="TrackId">Track:</label>
            <select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
                <option selected="selected" value="1">Track A</option>
                <option value="2">Track B</option>
                <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
            </select>
        </div>
    </div>
</div>

And it looks something like this:

enter image description here

How can I right-align my <label> and <select> elements within the container <div>?

Tags:

4

Answers


  1. 0

    You can use Bootstrap’s utility classes d-flex and align-items-center in this case. See the snippet below:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6 col-sm-6">
    <h4>Title</h4>
  </div>
  <div class="col-md-6 col-sm-6">
    <div class="form-group d-flex align-items-center gap-3">
      <label for="TrackId">Track:</label>
      <select class="form-control" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
        <option selected="selected" value="1">Track A</option>
        <option value="2">Track B</option>
        <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
      </select>
    </div>
  </div>
</div>

    If you convert these utility classes into CSS then it just means:

    display: flex;
flex-direction: row; /*default value for `flexbox`*/
align-items: center;
    Login or Signup to reply.
  2. 0

    Adding ml-auto to your form-group div should do the trick

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6">
    <h4>Title</h4>
  </div>
  <div class="col-md-6 form-inline">
    <div class="form-group ml-auto">
      <label for="TrackId">Track:</label>
      <select class="form-control mb-2 mx-sm-4" data-val="true" data-val-required="The Track: field is required." id="TrackId" name="TrackId">
        <option selected="selected" value="1">Track A</option>
        <option value="2">Track B</option>
        <option value="3">Track C aslkdfjaksdfjlskjdflaksdjfklasjdlksdjf</option>
      </select>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    you could use the .justify-content-between class together with the .row class.

    <div class="row justify-content-between">
....
</div>

    and the flex does the rest.

    Login or Signup to reply.
  4. 0

    Code should be like this,

    <div class="row justify-content-between">
    // Other elements here
</div>

    .justify-content-between this is build in class from BS5. Hope simply this will be worked, lets try it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search