<div >
                <div >
                    <div  id="input_element" contenteditable="true" data-max-length="100">Test </div>
                </div>
                <div >
                    <button  type="submit" value="click" name="delete_element">X</button>
                </div>
            </div>

The "delete_element" button I'm trying to make here seems to insist on aligning to the bottom no matter how I try to style it, either by using inline CSS styling or calling bootstrap align methods. I want to have it aligned with the contenteditable element - how do I do this? Is there a bug when you use a button in a col?

CodePudding user response：

You don't understand how Bootstrap works, that's why your button is aligned to the bottom of the row (!) no matter what.

Note: I edited your question title because it's wrong.

Wrong: How to stop Bootstrap button from aligning to the bottom of a col?

Correct: How to stop Bootstrap column from aligning to the bottom of a row?

Because of the class col, your button will always be taking full screen width (i.e., 12 columns) no matter what CSS you add. Consequently, it's not the button that causes the problem. It's the column class that causes the problem.

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

1. both columns together should not exceed 12 columns and
2. you should not use the class col (you can use classes col-1, col-2, col-3, etc.).

In an example below you can see that I used the class col-1 twice (1 column 1 column = 2 columns, which is less than 12 columns). I suggest you to read Bootstrap 5 docs about the grid system.

See the snippet below.

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

<div >
  <div >
    <div  id="input_element" contenteditable="true" data-max-length="100">Test </div>
  </div>
  <div >
    <button  type="submit" value="click" name="delete_element">X</button>
  </div>
</div>