How Do I Align my button to center inside a card footer (bootstrap)

Question

Good Day Devs! I wanted to put up a button below my card labelled as "Add to cart" but the position of the button is at the left, I want to put it in the middle and I don't quite know how to customize it, am using bootstrap 4 for my design. Thank you for your help!

             <div class="card">
                <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                         <h5 class="card-title">Card title</h5>
                         <p class="card-text">Title Information Here.</p>
                    </div>
    
                 <div class="card-footer">
                    <button type="button" class="btn btn-secondary">Secondary</button>
                </div>
            </div>

do you want insert "Add to cart" in footer card or out of the card wrapper? — Amir, Aug 24 '20 at 09:03

MaxiGui · Accepted Answer · 2023-02-22T07:59:20.407

To respect the Bootstrap structure you already put, Just add d-flex on your card footer and then add class mx-auto on your button:

<div class="card">
   <img class="card-img-top" src="..." alt="Card image cap">
   <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Title Information Here.</p>
   </div>
   <div class="card-footer d-flex">
     <button type="button" class="btn btn-secondary mx-auto">Secondary</button>
   </div>
</div>

gpl · Answer 2 · 2020-08-24T09:14:32.970

Check out this snippet:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <style type="text/css"></style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Title Information Here.</p>
    </div>

    <div class="card-footer mx-auto justify-content-center">
        <button type="button" class="btn btn-secondary">Secondary</button>
    </div>
</div>

</body>
</html>

You need to apply mx-auto justify-content-center classes to your <div class="card-footer>

score -1 · Answer 3 · answered Aug 24 '20 at 09:08

.card-footer{ display: flex; justify-content: center; align-items: center; }

   <div class="card">
                <img class="card-img-top" src="..." alt="Card image cap">
                    <div class="card-body">
                         <h5 class="card-title">Card title</h5>
                         <p class="card-text">Title Information Here.</p>
                    </div>
    
                 <div class="card-footer">
                    <button type="button" class="btn btn-secondary">Secondary</button>
                </div>
            </div>

How Do I Align my button to center inside a card footer (bootstrap)

3 Answers3