(Please refer to the image below for a visual representation)
I have developed a responsive website using Bootstrap 4. I am looking to create an alert box that will be displayed at the bottom of the page and overlay on top of all elements, regardless of the screen size.
This alert box should appear when each box is clicked (as shown in the image with gray areas labeled "Some text") and then fade out after 2 seconds.
I need guidance on how to ensure the alert box overlays correctly regardless of the window size.
I have also included some relevant code snippets for reference.
Thank you in advance.
Image https://i.sstatic.net/y9d6a.jpg
HTML
<div class="container-fluid">
<div class="row">
<div class="card-group">
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="card">
<div class="card-body">
<h5>.....Some Text.....</h5>
</div>
</div>
</div>
(More div blocks here)
</div>
</div>
</div>CSS
.card{
width: 14rem;
height: 8rem;
background-color: #e2e2e2;
transition: 0.3s;
color: #333333;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.card:hover{
background-color: rgba(71, 172, 255,1);
cursor: pointer;
}
.card-body{
display: flex;
align-items: center;
text-align: center;
justify-content: center
}