CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3
wendyc292
wendyc292

Reputation: 11

Button is out of container in Bootstrap

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!

Upvotes: 0

Views: 3365

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 15740

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 >
  <a href="" class="btn btn-primary pull-right">Button</a>
</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.

Upvotes: 0

jme11
jme11

Reputation: 17372

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.

Upvotes: 1

Related Questions