Home > Blockchain >  Position error messages (alerts) in the bottom right corner using Bootstrap and CSS
Position error messages (alerts) in the bottom right corner using Bootstrap and CSS

Time:06-08

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>

  • Related