bretterer bretterer - 2 months ago 10
CSS Question

Display twitter bootstrap btn-group inline with text

Problem

I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.

What I Have

I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.

<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>


What I have tried

I have tried a few things here. I modified the
<p>
tag to be a
<div class="row">
with two span divs one for the buttons and one for the text but this did not work. I also tried the following:

<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>


and defined in the css
.inline {display:inline-block; zoom:1; *display: inline;}
However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.

What the above is giving me

Question

What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?

Update

Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
With pull-left class added to btn-group

I assume that this is because of floating. Is this correct and how would I fix it?

Answer

Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/

I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.

It's worth having a look at some CSS resources so that you understand what's happening here.

Comments