CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3frontendtwitter-bootstrap-2
shmulik hazan
shmulik hazan

Reputation: 193

Prevent bootstrap button groups from breaking

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:

enter image description here

Upvotes: 11

Views: 5646

Answers (1)

bets
bets

Reputation: 830

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

Upvotes: 21

Related Questions