How can I make Bootstrap alert appear on top of other elements?

Question

I have an input box that if the value is not valid on button click should send out a bootstrap alert. I want the alert to appear on top of the input box.

Right now, it is showing below the input box. Is there a way to make it appear in the middle of the page on top of the text box?

const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
  document.getElementById("show-alert").classList.remove("d-none")
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<div class="d-flex align-items-center justify-content-center" id="record">
    <div class="input-group mb-3 input-group-lg w-50">
      <input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
      <button class="btn btn-success" id="mybtn" type="button">Enter</button>
    </div>
</div>

<div class="d-flex align-items-center justify-content-center d-none" id="show-alert">
    <div class="alert alert-danger alert-dismissible fade show row">
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      <strong>Danger!</strong> Button was clicked
    </div>
  </div>

Also on closing the alert box, is there a way to add the d-none class back?

Answer 1

Seems like you want a vertically centered modal. It would probably give you a better, more accessible UX.

If you do want an alert, Bootstrap provides methods for showing them. Always try to work with a library, not alongside it, to reduce effort. That's also how you'd make it reusable.

To answer the question as asked, use positioning classes. I used position-fixed to set the alert with respect to the viewport instead of a parent element, and centering is done with top-50 start-50 translate-middle.

const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
  document.getElementById("show-alert").classList.remove("d-none")
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

<div class="d-flex align-items-center justify-content-center" id="record">
  <div class="input-group mb-3 input-group-lg w-50">
    <input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
    <button class="btn btn-success" id="mybtn" type="button">Enter</button>
  </div>
</div>

<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>

<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>

<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>

<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>

<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>

<div class="position-fixed top-50 start-50 translate-middle d-flex align-items-center justify-content-center d-none" id="show-alert">
  <div class="alert alert-danger alert-dismissible fade show row">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>Danger!</strong> Button was clicked
  </div>
</div>