Prevent hacking groups of boot buttons

Question

How can I prevent the noise canceling buttons from breaking to 2 lines when there is less space?

I am trying to use the following Bootstrap code:

   <div class="btn-group" style=" width:100px ;">
        <button type="button" class="btn btn-default" style=" width:30px;">-</button>
        <input type="text" class="form-control" style="width:30px;">   
        <button type="button" class="btn btn-default" style=" width:30px;"> +</button>
    </div>

And it looks like this:

Answer 1

This is what worked for me, turning a group of buttons into a flexible element (by default it does not wrap):

.btn-group {
  display: flex;
}

I saw this here, and there are a few more options: https://github.com/twbs/bootstrap/issues/9939