Button is out of container in Bootstrap - responsive-design

Question

I'm using Bootstrap 3 to design my website. In a large window my button appears fine within its gray box and border. However, when I resize the window to check responsiveness, the button ends up being outside the boundaries of the container.
Here's my code:
<div class="col-md-4 col-sm-12 col-xs-12 gray-box top-space">
<h3><?php echo __("Test");?></h3>
<p><?php echo __("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in est nec mauris dapibus porta sit amet sit amet diam. Cras sit amet imperdiet elit. Nunc vehicula consectetur augue a pretium.");?></p>
<a href="/pricing/" class="btn-primary pull-right" ><?php echo __("Test");?></a>
</div>
And here's the css for the gray-box.
.gray-box {
background-color: #F5F4F4;
border: 1px solid #D3D3D3;
border-radius: 10px;
padding: 10px;
}
Anyone know what I'm doing wrong or what needs to be done? Thanks!

Answer 1

You just forgot to add the btn class to your button. Buttons always require the btn class in addition to the btn-default (or -primary, etc.). The btn class styles the element to look like the button and the btn-* classes apply the appropriate color and hover styles.

Answer 2

Two solutions off the top of my head.
1) Throw a .clearfix in after your pull-right to reset it:
<div class="btn btn-primary pull-right">Button</div>
<div class="clearfix"></div>
2) Put the button in its own div:
<div >
Button
</div>
Also, no need to classify col-xs-12 and col-sm-12 and col-md-4 — the default is col-xs-12 until it hits something else, so you can just do col-md-4 for the same result.