Bootstrap 4: How do I center a fixed col button?

  • vitaliyg
    Likes 0

    Problem Description

    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!

  • Sonar Systems admin
    Likes 0

    Could you post the entire source code please.

Login to reply