If you have one column that you know needs to be a specific width, and the other one is just filling the space, you can use this! Maybe the designer wants the sidebar to hide completely if empty, so the main body copy fills that space. Or, you have two columns inside of an accordion body–if the second column is left empty, the first column will expand to fill that space.
How To
HTML
This can normally all be done with a setup like this:
<div class="row">
<div class="col">
text
</div>
<div class="col-md-3 remove-blank">
sidebar text
</div>
</div>
In that example, the main col div will expand to fill the space if the col-md-3 div is left empty.
Styling
HOWEVER. It’s not quite so easy if you have a table within the main body col class. With the way we do our tables, it can cause issues and break. To fix that breakage, add a class of overflow-x-auto to your col div. Don’t forget to also go into your helpers.scss and add the class.
.overflow-x-auto { overflow-x: auto; }
Example Sites
Tags: ‘html, bootstrap, css, scss, sass, bs4, grid’