CODEWITHSUNDEEP
csstwitter-bootstrap
William Entriken
William Entriken

Reputation: 39263

Bootstrap: vertically align paragraph text and buttons

I have text in a paragraph with a button a element:

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

However, this renders with the two not vertically aligned.

enter image description here

What is the best way to align the text baseline here?

Fiddle at http://jsfiddle.net/0j20stbh/

Upvotes: 14

Views: 12917

Answers (3)

Jon Schneider
Jon Schneider

Reputation: 26973

To tweak the vertical position of the button to match the adjacent text while leaving the position of that text as-is, you can add the aptly-named align-baseline class to the button:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

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

The align-baseline class also works well with Bootstrap link buttons (buttons with class btn-link).

Upvotes: 0

Aaron
Aaron

Reputation: 141

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

Upvotes: 4

Brian Dillingham
Brian Dillingham

Reputation: 9356

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>

Upvotes: 16

Related Questions