CODEWITHSUNDEEP
cssbuttontwitter-bootstrap
Jack Wilsdon
Jack Wilsdon

Reputation: 7025

Bootstrap btn-group mis-aligned

I'm having a problem with the following code;

    <li class="span4">
        <div class="thumbnail">
            <img src="" alt="" />
            <div class="caption">
                <h3>Title</h3>
                <div class="clearfix">
                    <div class="pull-right">
                        <div class="btn-group">
                            <button class="btn btn-success"><i class="icon-thumbs-up"></i></button>
                            <button class="btn btn-danger"><i class="icon-thumbs-down"></i></button>
                            <button class="btn btn-warning"><i class="icon-star-empty"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>

The buttons in the thumbnail description look like this;

Problem with buttons

The main problem I am having, is that these only appear broken sometimes. Not always.

It works fine in JSFiddle, but here it is anyway; http://jsfiddle.net/NsKYH/1/

Upvotes: 2

Views: 5115

Answers (3)

Tamlyn
Tamlyn

Reputation: 23564

Simplest fix to prevent wrapping of button group comes from brianmhunt:

.btn-group {
    display: flex;
}

Flexbox is pretty well supported these days.

Upvotes: 2

sandeep
sandeep

Reputation: 92803

May be it's better if you define white-space:nowrap to .btn-group DIV. Write like this:

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

Upvotes: 4

user1575941
user1575941

Reputation:

I found some browsers and custom CSS have issues with a white-space between the button tag. Try:

<div class="btn-group"><button
    class="btn btn-success"><i class="icon-thumbs-up"></i></button><button
    class="btn btn-danger"><i class="icon-thumbs-down"></i></button><button
    class="btn btn-warning"><i class="icon-star-empty"></i></button></div>

or force the style in a CSS (better idea) or inline (not a good idea):

<div class="btn-group" style="white-space:nowrap;"> ...

You will also find this issue with input-append (etc.) groupings. Removing the space between html tags seems to fix this.

Upvotes: 2

Related Questions