If you're struggling with Bootstrap alignment issues, it may be due to a misunderstanding of how the framework functions. One common issue is buttons being consistently aligned at the bottom of a row (!), regardless of styling attempts.
In order to clarify your question title, I made an adjustment:
Previous: How to stop Bootstrap button from aligning to the bottom of a col?
Revised: How to stop Bootstrap column from aligning to the bottom of a row?
The culprit behind this alignment behavior is often the col class rather than the button itself. This class dictates that the element will span the full width of the screen (equivalent to 12 columns), overriding additional CSS modifications.
To achieve a side-by-side layout for two elements:
- Ensure the combined columns do not exceed 12 units, and
- Avoid using the generic
col class; instead, opt for specific widths like col-1, col-2, col-3, etc.
For illustration, I've provided a snippet below using two instances of col-1 (1 column + 1 column = 2 columns, less than the total). It could prove helpful to consult the Bootstrap 5 documentation on the grid system.
Take a look at the example below.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06646969727572746776463328362834">[email protected]</a>/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>