When the display property is set to none, no box will be generated for the element. In addition, attributes like offsetWidth and offsetHeight will return 0 when there is no CSS layout box associated with the element[1].
9.2.4 The 'display' property[2]
A value of 'none' causes an element to be excluded from the formatting structure, meaning it won't generate any boxes or affect layout. Descendants of the element will also not generate any boxes; both the element and its content are completely removed from the formatting structure. This behavior cannot be changed by setting the display property on descendant elements.
Note that using a display value of 'none' doesn't create an invisible box; it eliminates box generation altogether. CSS does have mechanisms that allow an element to generate boxes that impact formatting without being visible themselves. For more details, refer to the visibility section.
Instead of using the display property, consider utilizing the visibility property. This will make the box generated by the element invisible while still affecting layout.
11.2 Visibility: the 'visibility' property[3]
The visibility property determines if the boxes generated by an element are rendered. Invisible boxes still impact layout (use the display property set to 'none' to prevent box generation altogether). Values can mean:
- hidden
The box is invisible (completely transparent, nothing is drawn), but it affects layout. Descendants with 'visibility: visible' would still be visible.
For grid layout in Bootstrap 4 using Flexbox, you can manage the order of flex items with the order property[4].
Grid system[4]
Bootstrap’s grid system utilizes containers, rows, and columns for content layout and alignment. It's based on flexbox and fully responsive. Here's an example and a detailed overview of how the grid works.
To achieve this effect, utilize the visibility and order properties:
const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');
function myFunction() {
rightDiv.style.visibility = "hidden";
leftButton.style.visibility = "visible";
leftButton.parentElement.style.order = 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col" style="height: 9vh; border: 1px solid black; width: 100%">
<button id="leftButton" style="visibility: hidden"> Hello</button>
</div>
<div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
<button onclick="myFunction()"> Hello</button>
</div>
</div>
If you wish to set the width of #leftButton to 100%, you can achieve this by using a pseudo-element and the align-items property.
const rightDiv = document.querySelector('#rightDiv');
const leftButton = document.querySelector('#leftButton');
function myFunction() {
rightDiv.style.display = "none";
leftButton.style.display = "block";
}
/* Position adjustment by pseudo-elements and `margin` for` padding` etc ... */
.leftColumn::before {
flex-basis: 50%;
content: "";
}
#leftButton {
margin: 0 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col d-flex align-items-start leftColumn" style="height: 9vh; border: 1px solid black; width: 100%"> <!-- Use flexbox -->
<button id="leftButton" style="display: none"> Hello</button>
</div>
<div id="rightDiv" class="col" style="height: 9vh; border: 1px solid black">
<button onclick="myFunction()"> Hello</button>
</div>
</div>
References:
- CSSOM View Module
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification