CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mihsathe
mihsathe

Reputation: 9154

Twitter Bootstrap: overflow of btn-group

I have a bunch of buttons inside a div with fixed width and auto height. I want the contained buttons to shift to the next line once they overflow the container div.

Here's my code:

<div class='btn-group' style='width:100px; height:auto;'>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
  <button class='btn'>Hello</button>
</div>

The buttons get out of the group. Doing a <br /> helps but I'd prefer if there is a more direct solution since I am inserting buttons programatically. Thanks.

Upvotes: 2

Views: 2762

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Override the whitespace property on .btn-group

.btn-group{
    white-space: normal;
}

JSFIDDLE: http://jsfiddle.net/k9XCj/

Upvotes: 2

Related Questions