Display twitter bootstrap btn-group inline with text
css, twitter-bootstrap
Solution
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.
Problem
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. 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: I assume that this is because of floating. Is this correct and how would I fix it?