My current code snippet appears below.
<div class="col-xl-2 col-lg-12">
<button class="btn btn-secondary w-100" value=1>But.</button>
</div>
<div class="col-xl-4 col-lg-12">
<button class="btn btn-secondary w-100" value="1">Button Down</button>
</div>
<div class="col-xl-4 col-lg-12">
<button class="btn btn-secondary w-100" value="1">Button Up</button>
</div>
<div class="col-xl-2 col-lg-12">
<button class="btn btn-secondary w-100">But.</button>
</div>
This is the typical appearance of the layout. https://i.sstatic.net/rQ1Lr.png
Each col has customized settings to adapt to the window size and fill accordingly. However, there are certain resolutions where the buttons display like this:
https://i.sstatic.net/RVRv2.png
Prior to achieving the desired layout:
https://i.sstatic.net/28ddE.png
The text within the "But." buttons overflows, while the "Button down" text gets divided into two lines. How can I prevent overflow on the "But." button text and maintain separate lines for the "Button down" button text? I contemplated recompiling Bootstrap to redefine the xl grid breakpoint, but that seems excessive (and poor practice) for such a minor issue. Is there an alternative approach to achieve the desired outcome?