CODEWITHSUNDEEP
twitter-bootstrap
ndemoreau
ndemoreau

Reputation: 3869

twitter bootstrap 2.1 button inline with text

Since the version 2.1 of Twitter bootstrap, my buttons don't align vertically anymore with text in front of them.

Apparently, in the previous version, the btn class had a left: float and it is not the case anymore.

I guess it's up to me to change my pages in order to adapt to this change but I can't figure out how to change it.

Here is a fiddle of how it looks like in version 2.0: http://jsfiddle.net/Sherbrow/5N6FQ/

And this is one in version 2.1: http://jsfiddle.net/ndemoreau/UKwEU/

What can I do?

Thanks!

Upvotes: 0

Views: 727

Answers (2)

Hörður Ingi
Hörður Ingi

Reputation: 1

Wrapping the text and the button inside a table in separate cells almost gives you the solution. Then you can use padding to position the button exactly where you want.

This is all the css you need and it gives you a lot of control over the positioning:

.textbefore  {  }
.buttonafter { padding-top: 4px; padding-left: 8px; }

A working JSFiddle Demo.

Upvotes: 0

Sherbrow
Sherbrow

Reputation: 17379

There has been a bunch of changes between 2.0 and 2.1, and a lot of those concerns font sizes and line heights. Here is what I came up with : Demo (jsfiddle)

h1 small { vertical-align: middle; }
h1 small .btn-group {
    display: inline-block;
    vertical-align: text-top;
}

I doubt this is really centered, but it should be close enough. If it doesn't work in real-life conditions (different button size, etc.) you should try margins.

Tested on Firefox 15, Google Chrome 24 and IE 9.

Upvotes: 1

Related Questions