CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jonathan Wood
Jonathan Wood

Reputation: 67195

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>?

Upvotes: 1

Views: 205

Answers (4)

Tanvir Ahammad Chy
Tanvir Ahammad Chy

Reputation: 126

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.

Upvotes: 0

Nelsongt77
Nelsongt77

Reputation: 58

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.

Upvotes: 0

Yong
Yong

Reputation: 1685

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;

Upvotes: 0

Connor Forbes
Connor Forbes

Reputation: 124

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>

Upvotes: 1

Related Questions