Bootstrap: vertically align paragraph text and buttons

Question

I have text in a paragraph with a button element:

 <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted">Available after reading course material</span> </p> 

However, this means that they are not aligned vertically.

What is the best way to align source text here?

Script http://jsfiddle.net/0j20stbh/

Answer 1

Using the same style as .btn is likely to be a good approach. Example with disabled .btn

 <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted btn" disabled="true">Text</span> </p> 

---

Or create a .btn-align class with the same attributes. Example

CSS

 .btn-align { padding: 6px 12px; line-height: 1.42857143; vertical-align: middle; } 

HTML

 <p> <a class="btn btn-default" href="#">Take exam</a> <span class="text-muted btn-align">Available after reading course material</span> </p>