Layering a Bootstrap column on top of another column - html

Question

How does one overlay a bootstrap column on top of another column, but also keep its size and responsiveness?
For example, I have 4 columns in a row:
When I click on the Overlay btn, it should show the E column over B:
I currently have this test code I am playing with:
Live jsfiddle: 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/bootstrap#5.2.2/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/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I am using d-none for E because it does not take up space, otherwise it'll cause Bootstrap to think there are 5 columns, when it's actually 4 columns and one overlay column (on top of B).
The above code sort of works due to position-absolute, but it's in the wrong location, and the column size is not the same as the other 4 columns (appears wider):
Part of the confusion also stems from the bootstrap documentation. It appears if I use position-absolute, I can only position things in certain quadrants of the screen, using top-, start-, end-, and bottom-:
https://getbootstrap.com/docs/5.0/utilities/position/
But because I need this to be responsive and match the column width and such of existing columns in the row, those positioning classes don't help me much here.
How can I overlay my E column properly? Ideally the solution should work for any number of columns in a row, not just 4 like I have above.

Answer 1

Absolute positioning is often problematic and unnecessary. Just toggle the columns in standard layout.
$(".a .btn").click(function() {
$(".b, .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/bootstrap#5.2.2/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 e d-none">
<div class="vh-100">
<span>E</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>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
If you actually need both columns visible, I'd propose toggling contents instead of columns. Here you will use absolute positioning. I'm also toggling the style class on the column.
$(".a .btn").click(function() {
$('.b-e').toggleClass('b e');
$(".b-e .col-overlay").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;
left: 0;
right: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/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-e b position-relative">
<div class="vh-100 col-overlay position-absolute d-none">
<span>E</span>
</div>
<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>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>