In Bootstrap should separate input fields be put inside own col or share col to keep them together, right justified

user_1480018 0
Viewed 109

In Bootstrap should separate input fields be put inside their own col or share col to keep them together, right justified.

I have a combo and input that I want to be shown on the same row on the right-hand side of the screen. If I put it together in a col-4

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-4 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

they are shown on top of each other

If I put in their own col-2s then only the second one is right-justified, the other one is in the center

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 ms-auto m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 ms-auto m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
                                Filter
                            </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

I also tried adding style="display: inline" to the input field but made no difference. What is the correct way of doing this?

It seems that select elements will use all the available space, so in the first case, if I used a larger number of columns (e.g col-8) then all that space will always be used by the first select, never shared with the text input field

Update

Answer from Cervus seems to work, except I need to keep ms-auto or first column will just expand to take up whole, why is that, this is my code

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col col-auto m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 col-auto m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

If I remove col-auto I get first column too wide

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
        <div class="row justify-content-end">
            <span class="col m-2">
                <span class="input-group">
                    <label class="input-group-text" for="sort_list">
                        Sort By
                    </label>
                    <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
                        <option value="sortname_asc">
                            Sort Name Up
                        </option>
                        <option value="sortname_desc">
                            Sort Name Down
                        </option>
                        <option value="name_asc">
                            Name Up
                        </option>
                        <option value="name_desc">
                            Name Down
                        </option>
                    </select>
                </span>
            </span>
            <span class="col-2 m-2">
                <span class="input-group">
                    <span for="filter" id="filterlabel" class="input-group-text">
                        Filter
                    </span>
                    <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
                </span>
            </span>
        </div>

bootstrap-5 css html
2 Answers

The solution

It's very easy, you were close. Do the following:

  1. Remove the class ms-auto from both col-2 elements.
  2. Add classes d-flex align-items-center to the second col-2 element to center the content vertically.

See the snippet below.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <div class="col-2 m-2">
    <select id="sort_list" style="display: inline" class="form-select m-2">
      <option value="sortname_asc">
        Sort by Sortname ascending
      </option>
      <option value="sortname_desc">
        Sort by Sortname descending
      </option>
      <option value="name_asc">
        Sort by Name ascending
      </option>
      <option value="name_desc">
        Sort by Name descending
      </option>
    </select>
  </div>
  <div class="col-2 d-flex align-items-center m-2">
    <div class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">Filter</span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>

UPDATE

Set max-width: 280px !important; to the first column.

See the snippet below.

#first_column {
    max-width: 280px !important;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="row justify-content-end">
  <span class="col m-2" id="first_column">
    <span class="input-group">
        <label class="input-group-text" for="sort_list">
            Sort By
        </label>
        <select id="sort_list" name="sort_list" class="form-select" onchange="sort(this);">
            <option value="sortname_asc">
                Sort Name Up
            </option>
            <option value="sortname_desc">
                Sort Name Down
            </option>
            <option value="name_asc">
                Name Up
            </option>
            <option value="name_desc">
                Name Down
            </option>
        </select>
    </span>
  </span>
  <span class="col-2 m-2" id="second_column">
    <span class="input-group">
      <span for="filter" id="filterlabel" class="input-group-text">
          Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </span>
  </span>
</div>

user_103471450

This puts both input fields on the same row and it should justify it to the right. Does this do what you are expecting?

<div class="container">
  <div class="row justify-content-end">
    <div class="input-group m-2 col-4">
      <select id="sort_list" class="form-select form-control">
        <option value="sortname_asc">
          Sort by Sortname ascending
        </option>
        <option value="sortname_desc">
          Sort by Sortname descending
        </option>
        <option value="name_asc">
          Sort by Name ascending
        </option>
        <option value="name_desc">
          Sort by Name descending
        </option>
      </select>
      <span for="filter" id="filterlabel" class="input-group-text">
        Filter
      </span>
      <input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
    </div>
  </div>
</div>
user_9576480
Related