When you use pull-right
, Bootstrap is applying float:right
. This removes the element from document flow, meaning that it will no longer affect the height of its parent container. This is the first thing you need to fix. There are a few different methods, but my favorite is applying overflow:auto
to the parent element.
Now that this problem is solved, you still have to deal with the fact that the line height of the text is not the same as the height of the button. To fix that, simply assign the line height. In this case, the button has a height of 36px
, so you can use line-height:36px
.
Here's some working code (and here's the updated fiddle):
HTML
<div class="alert alert-info">
Text on the left
<a class="btn btn-default pull-right" href="#">Link</a>
</div>
CSS
div {
overflow: auto;
line-height: 36px;
}