Hidden Bootstrap notification blocks buttons

Its not full proof but you could maybe create your own class or add some css to position the alert somewhere else while it is hidden.

You could use pointer-events: none; css when the alert is not visible and extend your .show class to include pointer-events: auto;

That might be a quick fix if I'm understanding your question right.

---

Update

On the bootstrap alerts page if I remove the show class from the dom, the alert becomes invisible but it still acts as block element. Is your absolute positioned? Strange, I would of thought you could click through the hidden alert with pointer-events: none;

Try this css maybe..

.alert-dismissible {
  pointer-events: none; 
}

.alert-dismissible.show {
  pointer-events: auto; 
}

---

Update 2

Because you want to keep the alert in the dom at all times. Maybe just only use the .alert class and not use the .alert-dismissible classes.

When you are removing .show class, this will only change the opacity to 0. This is so the bootstrap dismissible animation can fade the alert out before destroying it.

Try loading your html with this class .alert-hidden.

.alert-hidden {
  display: none;
}

Then toggle this class as you need to with your script.

setTimeout(function() {
    $("#alertLogged").addClass("alert-hidden");
}, 5000);