Problem:

I am building a responsive site and want my main call to action button to be full-width on xs screen sizes, and then adjust to a fixed column width on larger screens. I’ve been able to accomplish this, however on larger screens, my fixed col button seems to be stuck aligned-left.

Here’s my code:

<div class="jumbotron" id="hero-home">
  <div class="container text-center m-y-lg white">
    <h1 class="display-3 m-b">We do branding.</h1>
    <h3 class="m-b-lg"><small>We make your business look better than your competition so you get more customers.</small></h3>
    <button type="button" class="btn btn-primary btn-lg m-b-md col-xs-12 col-sm-4 col-xl-3">
      Follow us
    </button>
  </div>
</div>

As you can see, I have “text-center” class set on my container but that works for everything except for the button. I have also tried adding that same class to the button, as well as the “center-block” class, but with no luck.

How do I make the button center align on the page?

Thanks for the help!