Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness?
Consider this scenario with 4 columns arranged in a row:
https://i.sstatic.net/qug0g.png
Upon clicking the Overlay btn, the E column should overlay the B column like this:
https://i.sstatic.net/VxZmI.png
This is the test code I am currently experimenting with:
View live demo: https://jsfiddle.net/8pmt6ck2/2/
$(".a .btn").click(function() {
$(".e").toggleClass("d-none");
});.one .a {
background-color: red;
}
.one .b {
background-color: blue;
}
.one .c {
background-color: green;
}
.one .d {
background-color: pink;
}
.one .e {
background-color: orange;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca0bca0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container one">
<div class="row">
<div class="col-sm-3 a">
<div class="vh-100 text-center">
<span>A</span>
<button class="btn btn-primary">Overlay btn</button>
</div>
</div>
<div class="col-sm-3 b">
<div class="vh-100">
<span>B</span>
</div>
</div>
<div class="col-sm-3 c">
<div class="vh-100">
<span>C</span>
</div>
</div>
<div class="col-sm-3 d">
<div class="vh-100">
<span>D</span>
</div>
</div>
<div class="col-sm-3 e position-absolute d-none">
<div class="vh-100">
<span>E</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb2aeb2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>I've applied the class d-none to column E to prevent it from affecting the layout as an actual column, since there should be only 4 columns including the overlay in the row.
The current implementation utilizing position-absolute partially works but the positioning is incorrect, and the width of the column doesn't match the other 4 columns (it appears wider):
https://i.sstatic.net/JuNu2.png
The confusion also arises from the Bootstrap documentation which suggests limited positioning options using position-absolute such as top-, start-, end-, and bottom-:
https://getbootstrap.com/docs/5.0/utilities/position/
However, these predefined positioning classes do not cater to my requirements for maintaining responsiveness and matching existing column widths in the row.
How can I properly overlay my column E? The solution should ideally accommodate any number of columns in a row, not just restricted to 4 as demonstrated above.