14

I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?

...
<div class="row pt-4" id="cards">
  <div class="card-deck">

    // THIS IS THE CARD WITH THE WIDENED BUTTON
    <div class="card">
      <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image" >
      <div class="card-body d-flex flex-column">
        <h5 class="card-title">Giving Back</h5>
        <p class="card-text">Help others and feel useful</p>
        <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
      </div>
    </div>

    // THIS CARD'S BUTTON SHRINKS TO FIT ITS TEXT
    <div class="card">
      <img class="card-img-top img-fluid" src="{{url_for('static', filename='spirituality.png')}}" alt="exercise_image" >
      <div class="card-body">
        <h5 class="card-title">Spirituality</h5>
        <p class="card-text">Connect to something larger than yourself</p>
        <a href="#" class="btn btn-primary">Set a Goal</a>
      </div>
    </div>

    ...

  </div>
</div>
...

Here's what the buttons look like: Comparison of the two buttons

mrwnt10
  • 1,234
  • 1
  • 17
  • 28

2 Answers2

19

Just wrap your anchor in another div

<div>
    <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
</div>


<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row pt-4" id="cards">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Giving Back</h5>
            <p class="card-text">Help others and feel useful</p>
            <div>
              <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

OR Just add align-items-center class on the flex div 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row pt-4" id="cards">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column align-items-center">
            <h5 class="card-title">Giving Back</h5>
            <p class="card-text">Help others and feel useful</p>
              <a href="#" class="btn btn-primary mt-auto">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
  • 1
    Thanks @Nandita. Adding `align-items-center` to the class fixed the width issue and kept the button bottom-aligned. Adding the div, on the other hand, fixed the width issue but removed the bottom-alignment. – mrwnt10 Jun 16 '18 at 13:32
  • Could you please explain why each of your recommendations has the effect of fixing the width issue? – mrwnt10 Jun 16 '18 at 13:33
  • ok. i didnt know what would be your requirement so added both answers :) – Nandita Sharma Jun 16 '18 at 13:33
  • 1
    by default, the align-items property value is 'stretch' that stretches each flex child element to full width of the flex parent. So adding align-items : center no longer stretches the button – Nandita Sharma Jun 16 '18 at 13:35
  • 1
    Adding div to the button makes the button no longer the direct child of flex element hence it wont affect it. Now the div wrapping the button will take full width but button will take width only according to the content inside it :) – Nandita Sharma Jun 16 '18 at 13:36
1

To you button class, add mx-auto to center the button and mt-auto to push the button at the bottom of the card.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row pt-4" id="cards">
      <div class="card-deck">
        <div class="card">
          <img class="card-img-top img-fluid" src="{{url_for('static', filename='volunteer.png')}}" alt="exercise_image">
          <div class="card-body d-flex flex-column align-items-center">
            <h5 class="card-title">Giving Back</h5>
            <p class="card-text">Help others and feel useful</p>
              <a href="#" class="btn btn-primary mt-auto mx-auto">Set a Goal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
Asif
  • 23
  • 6