Prevent bootstrap button groups from breaking

Question

How can I prevent bootstrap button goups from breaking in to 2 lines when there is less space?

I am trying to use the below 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:

Hebetude

add an extra style inline and change the width, eg <div class="btn-group" style="width:300px"> – Goforth

still not working. i was edited the original post. – Hebetude

Answer 1

This is what worked for me, turn the group of buttons to a flex item (by default it does not wrap):

.btn-group {
  display: flex;
}

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

Ayres