Position error messages (alerts) in the bottom right corner using Bootstrap and CSS-CodePudding

I'm trying to show some error messages, let's say

<div  role="alert">
        This is an error
        <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<div  role="alert">
        This is an error
        <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

Stacked in the bottom right corner of the screen, using HTML, CSS, Bootstrap Just like thisImage of messages in the bottom right corner

CodePudding user response：

You can create an error wrapper div and position it absolute. eg.

.error-container{
  position:absolute;
  bottom:0;
  right:20px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div >
 <div >
    <div  role="alert">
      This is an error 1
      <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<div  role="alert">
  This is an error 2
  <button type="button"  data-bs-dismiss="alert" aria-label="Close"></button>
</div>
  </div>
</div>