CODEWITHSUNDEEP
twitter-bootstrapoverflowresponsive-design
Metin Devekaya
Metin Devekaya

Reputation: 61

Bootstrap responsive content, buttons overflowing

I have a problem with Bootstrap where buttons overflow in a responsive row. It looks good in high resolutions, but when it gets resized the buttons just don't follow and fit inside the fluid row and instead stick outside the container (in this case the .content div).

<div class="container">
<div class="row-fluid">
    <div class="content span8">
        <div class="row-fluid">
            <div class="btn-group span5 offset7">
                <a href="#" class="btn">Button one</a>
                <a href="#" class="btn">Button two</a>
                <a href="#" class="btn">Button three</a>
            </div>
        </div>
    </div>
</div>
</div>​

Demo: http://jsfiddle.net/D9Xav/ (Drag it through different resolutions)

Any ideas how to solve this?

Upvotes: 0

Views: 4228

Answers (1)

Glynne McReynolds
Glynne McReynolds

Reputation: 560

It's because you've made them a button group. Buttons in button groups will not stack when the window is resized. Just take btn-group out of the code.

Upvotes: 4

Related Questions