Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Preventing Bootstrap button from filling flexbox

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

like image 574
mrwnt10 Avatar asked Jun 16 '18 04:06

mrwnt10


People also ask

Why are my bootstrap buttons the full width?

Bootstrap expects only columns to be inside row. Bootstrap 5 has CSS which forces all children in the row (expected to be columns) to grow to 100% width. So your buttons are growing to 100% width and wrapping because of flex-wrap on the . row .

How do I stop my flexbox from growing?

By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch.

How do I remove flex from bootstrap?

You want to change this to: $enable-flex: false ! default; After you have done this, recompile bootstraps the SCSS and you will then have disabled flex throughout the entire bootstrap framework.

How do I put gap between Flex items in bootstrap?

To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.


2 Answers

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>
like image 198
Nandita Sharma Avatar answered Sep 20 '22 23:09

Nandita Sharma


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>
like image 38
Asif Avatar answered Sep 17 '22 23:09

Asif