Bootstrap 4, How to Center-Align a Button

Bootstrap 4, How do I center-align a button?

In Bootstrap 4 one should use the text-center class to align inline-blocks.

NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">

  <div class="row">

    <div class="col text-center">

      <button class="btn btn-default">Centered button</button>

    </div>

  </div>

</div>

bootstrap 4 align buttons in center

Just use margin:auto its working with bootstrap 4

.center{margin:auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section class="row">

  <div class="center">

    <a class="btn btn-outline-primary" href="#">Home</a>

    <a class="btn btn-outline-primary" href="#">Traffic</a>

    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>

    <a class="btn btn-outline-primary" href="#">Alert Logging</a>

    <a class="btn btn-outline-primary" href="#">Diameter Server</a>

    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>

  </div>

</section>

How to align button to center using Bootstrap

One Bootstrap's most powerful features is nesting row elements. Every col-* container can have another row inside it, which then provides another full set of 12 col spaces:

<div class="col-lg-12">
    <div class="row">
        <div class="col-xs-4">
            <button class="btn btn-primary btn-sx" type="button">Confirm</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Middle Button</button>
        </div>
        <div class="col-xs-4">
            <button class="btn btn-primary btn-xs" type="button">Decline</button>
        </div>
    </div>
</div>

I'm not sure how your pull-* classes exactly work, but using Bootstrap's built-in grid system you should be able to get rid of those.

Don't miss the Bootstrap guide on nesting columns, as it provides way more information than this answer.

Align Buttons to left, center and right in Bootstrap

Updated Answer

Since you want all 3 buttons in one row, grouping them under 3 different "col-12" divs will not work. Either rename all "col-12" divs with "col-4":

<div class="row">
      <div class="col-4">
         <input type="submit" value="Save" class="btn btn-success float-left">
      </div>
      <div class="col-4 d-flex justify-content-center">
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
      </div>
      <div class="col-4">
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>

</div>

Or bring all 3 buttons under 1 div with class="col" with an additional class "d-flex justify-content-between" which makes it looks better and more cleaner than the previous:

<div class="row">
      <div class="col d-flex justify-content-between">
         <input type="submit" value="Save" class="btn btn-success float-left">
    
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
    
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>

</div>

Original Answer

You can use flex utilities to achieve this. Here are the missing classes in your code

d-flex justify-content-center

Here is the full code with the missing classes applied to the second col-12

<div class="row">
      <div class="col-12">
         <input type="submit" value="Save" class="btn btn-success float-left">
      </div>
      <div class="col-12 d-flex justify-content-center">
      <a href="#" class="btn btn-secondary mx-auto" style="margin:auto">Cancel</a>
      </div>
      <div class="col-12">
      <input type="submit" value="Commit" class="btn btn-success float-right">
      </div>
</div>

(Bootstrap 4) : Align Button with the text to be same line

To center align them, make the columns d-flex and use align-items-center...

    <div class="row text-center py-4 align-content-between flex-wrap">
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <p class="text-secondary mb-0">Copyright © Saud</p>
        </div>
        <div class="col-lg-4">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal"> Contact Us </button>
        </div>
        <div class="col-lg-4 d-flex justify-content-center align-items-center">
            <ul class="list-inline quicklinks mb-0">
                <li class="list-inline-item">
                    <a href="#">Privacy Policy</a>
                </li>
                <li class="list-inline-item">
                    <a href="#">Terms of Use</a>
                </li>
            </ul>
        </div>
    </div>

https://codeply.com/p/BBJM8P9UPR

how to center a span vertical inside a button with bootstrap 4

You can use flex and align-items: center to vertically center all items in the button. Apply the following styles to your button element:

.btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Or even better, you could simply use Bootstrap 4 classes in your button tag to achieve the same result:

<button class="d-flex align-items-center justify-content-between btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>

Getting button to align center in Bootstrap card footer

Here you go... You forgot to add d-flex.

Change this...

<div class="card-footer justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

...to this.

<div class="card-footer d-flex justify-content-center">                    
   <button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
      <div class="col-10 text-start">Tell Me</div>
      <div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
   </button>
</div>

Align Progress Bar Bootstrap 4 (centered value) with button

Just Add vertical-align: middle; to the .progress-bar-size. You need to do this because your elements are inline-flex.

Demo Fiddle