I am using flash to display a message, but the button right next to the text rather than in the bottom-right. How do I relocate the button?

        <div  role="alert">
            <%= success %>
                <button type="button"  data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
        </div>

Also, I want to make the button look more like this:
https://getbootstrap.com/docs/5.3/components/close-button/

CodePudding user response：

You need the respective CSS and JS files.

Get started with Bootstrap · Bootstrap v5.3

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<div  role="alert">
  <%= success %>
  <button type="button"  aria-label="Close"></button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

CodePudding user response：

You can simply use the class. text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions. Or you can just add the align-self-end class to the item to align at the bottom.