Why is the text out of line? and how to solve in bootstrap 4?

Question

Continuing with my question made earlier, I am now using the following code. There was another simple problem that I am not able to solve. The text written "CLEAR FILTERS" is out of tune regarding a button. Below is in picture the problem.

The text "CLEAN FILTERS" is passing out of the button. Every time I resize to the minimum before the inputs, Labels and selects is, superimposed, this text is not attached to the button.

However I do not know how to proceed to make this text responsive, my goal is that when I resize to the minimum before the overlay, the text "CLEAR FILTERS" decreases in size or the button increases its size to proceed next to the text.

What’s going on in this case and how can I solve this problem?

When doing a test, even the icones of the span are mismatched, so try to resize to the minimum possible, before everything is overlapped.

Answer 1

Puts a min-width on the button that is of sufficient size to fit the whole text. I used 170px and worked well for screens up to 272px wide.

In your CSS put something like CSS below and in HTML put class="limpar" in your btn

button.limpar {
    min-width: 170px;
}

See how it looks