Make sure the text in the button does not overflow (using Bootstrap v4)

Question

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

This is how it usually looks.

Each col has its own rules, so they populate the columns based on the size of the window. However, there is a small resolution window with buttons that do this:

Before adopting the correct layout:

"but". The inner text of the button overflows, while the "Button down" button text is split into two lines. How can I keep the text in "but"? Button overflow and split text in "button pressed" button into two lines? I thought I could recompile Bootstrap to redefine the xl grid breakpoints, but that's too much padding (and it's a bad practice to modify Bootstrap for such a small problem). Is there a way to get the behavior I want?

Answer 1

The main problem is that I'm trying to make the button width 100% using w-100. The problem is that when the screen is phone size, the behavior is expected (buttons fill columns horizontally). However, on large screens, there is a small resolution window during which w-100 forces the button to be smaller than the space required for the inner text (since the button width is 100% of the column containing it).

To solve this problem, I removed the two "but"s of the w-100. button and add my own rules to my css.

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

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

Another issue with text being split into two lines has been fixed by the text-nowrap class 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>