Aligning Floated Content

Question

I'm using the Twitter Bootstrap toolkit to style my site. I'm implementing a split button dropdown with markup similar to the following.

<div class="btn-group">
    <a class="btn btn-small btn-info" href="#">
        Add New Provider
    </a>
    <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">...</a></li>
        <li><a href="#">...</a></li>
    </ul>
</div>

This works as intended; however, I would like to align the entire button to the right. But the btn-group and btn classes are both floated left so any text alignment is ignored.

If I knew the total width of the button, I could set the outer <div> to that width and align the entire <div> in a parent <div>. But I don't know the total width.

Is there any way to align this content to the right, without reworking the underlying Bootstrap classes?

Note: I've posted a jsFiddle demo

Answer 1

I can't guarantee this will work on your specific use-case (because I haven't tried it for myself, and I don't know exactly what markup and CSS you're using), but this does work on your jsFiddle demo:

.panel-container {
    display: inline-block;
    text-align: right;
}

Answer 2

jsFiddle solution

I recommend using left/right padding instead of using text-align, although both will still work, regardless if they're being floated or not. What matters is that their widths are declared width: auto.

If you don't want to modify the core Bootstrap files, you can use the same classes in a separate stylesheet and override the styles from Bootstrap instead. Just ensure that the separate, personal stylesheet is called after Bootstrap. For example...

in bootstrap.css:

.input-mini {
    width: 60px;
}

in your personal-stylesheet.css:

/* Redefine the same style
   declared in Bootstrap */

.input-mini {
    width: 40px;
} 

in your header:

<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="personal-stylesheet.css" />

Answer 3

This was fixed in bootstrap 2.0.2. Use the bootstrap class "pull-right"

https://github.com/twitter/bootstrap/issues/2045

http://jsbin.com/ebemiz/2/edit#html,live