Bootstrap: vertically align paragraph text and buttons
Using the same styling as the .btn
would probably 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 make a class of
.btn-align
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>
In Bootstrap 4, you can do this using utilities to set display: inline-block
and vertical-align: middle
in case you don't want to create a special CSS class for it.
<p>
<a class="btn btn-outline-secondary" href="#">Take exam</a>
<span class="text-muted d-inline-block align-middle">Available after reading course material</span>
</p>
Example