How to prevent Bootstrap columns from aligning with row bottom

Question

<div class="row">
                <div class="col-lg-10">
                    <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">测试</div>
                </div>
                <div class="col">
                    <button class="btn" type="submit" value="click" name="delete_element">X</button>
                </div>
            </div>

Here the "delete_element" button I'm trying to create seems to insist on bottom alignment no matter how I try to style it, whether using inline CSS styles or calling bootstrap's align method. I want it to be aligned with the contenteditable element - how do I do this? Is there a bug when using buttons in col?

Answer 1

You don't understand how Bootstrap works, that's why your buttons are aligned with the row (!) bottom anyway.

NOTE: I changed your question title because it was wrong.

Thanks to the use of the col class, your button will always take up the entire screen width (i.e. 12 columns), no matter what CSS you add. So the problem is not caused by the button, but by the column class.

If you want two elements to be displayed side by side, then:

1. The sum of the two columns should not exceed 12 columns
2. Do not use the col class (you can use the col-1, col-2, col-3, etc. classes).

In the example below, you can see that I used the col-1 class twice (1 column 1 column = 2 columns, less than 12 columns). I recommend you read the Bootstrap 5 documentation on Grid System.

Please see the code snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div class="row d-flex align-items-center">
  <div class="col-1">
    <div class="expandable-input-small" id="input_element" contenteditable="true" data-max-length="100">Test </div>
  </div>
  <div class="col-1">
    <button class="btn" type="submit" value="click" name="delete_element">X</button>
  </div>
</div>