pull-right doens't work on button inside bootstrap alert

Question

I have a text and an undo button in my bootstrap alert as shown here:

As you can see, the button is vertically aligned to the center, but it is not on the right. Also, the close on the right and text on the left are not vertically aligned.

I've tried using This solution, but it results in my button being under the text. Also, the height of the alert ends up matching the height of the paragraph. Here is my HTML:

<div class="container">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
    <div class="alert {{ category }}" style="vertical-align: middle;">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p class="pull-left d-inline">{{ message }}</p>
        {% if category=='alert-success' %}
        <form action="/undo" method="post" class="d-inline pull-right">
            <input type="submit" value="UNDO" name="undo" class="btn btn-xs btn-danger pull-right">
        </form>
        {% endif %}
    </div>
    {% endfor %} 
    {% endwith %}
</div>

Note that I'm using Flask and this is Jinja syntax to get alerts. The reason I have a form in the alert is because I'm using Flask request handling to undo an action on a database.

score 1 · Accepted Answer · answered Apr 22 '23 at 08:53

As per the changelog, pull-left and pull-right classes were removed in Bootstrap v4.

Instead, to have the layout you'd like – including the vertical alignment – we can use a flex layout. I have also replaced the dismiss button content with an SVG cross mark so that it visually aligns more "true" to the vertical center.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="alert alert-success d-flex align-items-center">
    <p class="mb-0">{{ message }}</p>
    <form action="/undo" method="post" class="ml-auto">
      <input type="submit" value="UNDO" name="undo" class="btn btn-xs btn-danger">
    </form>
    <button type="button" class="close" data-dismiss="alert">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg>
    </button>
  </div>
</div>

pull-right doens't work on button inside bootstrap alert

1 Answers1