Make sure text doesn't overflow in button (using Bootstrap v4)

Here's my current code.

<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>

And this is how it normally looks.

Each col has its own rules so they fill the column depending on the window's size. However, there is a small window of resolution where the buttons do this:

Before adopting the right layout:

The "But." buttons' inner text overflows, while the "Button down" button text splits in two lines. How can I keep the text from the "But." button from overflowing and keep the text from the "Button down" button to be separated into two lines?
I thought I could re-compile Bootstrap to redefine the xl grid breakpoint, but that fills like too much (and a bad practice, to modify Bootstrap like that for such a small issue). Isn't there a way to get the behaviour I want?

The main problem is that I was trying to make the buttons' width 100% with w-100. The thing is that when the screen is phone size, the behaviour is the expected one (the button fills the column horizontally). However, on big screens, there is a small window of resolutions during which w-100 forces the button to be smaller than the space that the inner text needs (since the button width is 100% of the column containing it).

To fix this, I removed the w-100 of those two "But." buttons and add my own rule to my css.

@media (max-width: 1199.98px) {
	.btn-full-width {
	  width: 100%;
	}
  }

So, by default, the button takes as much space as the inner text requires, and on smaller screens (any resolution below the XL breakpoint), it takes the whole column.

The other issue, about the text getting divided on two lines was fixed with the class text-nowrap in the other two buttons.

<div class="row mb-2">
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width">But.</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100">Button up</button>
    </div>
    <div class="col-xl-4 col-lg-12">
        <button class="btn btn-secondary text-nowrap w-100" type="button">Button down</button>
    </div>
    <div class="col-xl-2 col-lg-12">
        <button class="btn btn-secondary btn-full-width invert-button" type="button">But.</button>
    </div>
</div>