BootstrapVue how to push b-button to bottom of b-card element

Question

Can't push b-button down to the bottom of the b-card.

I've tried:
Bootstrap class= flex-box like i would with just a plain <div>(This example below)
Inline styling with flex box.
Using b-card-footer with button inside Making just the b-botton a standard html button with bootstrap btn class
Adding an additional b-row below b-card and adding the mt-auto to that

Edit..Just tried this as well...

<b-row align-v="end">
    <b-button class="mt-auto" href="#" variant="primary"></b-button>
</b-row>

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

the class to turn a tag into a flex box is `d-flex` , aside you would need here also `flex-column`. the `mt-auto` class is already to make it work as expected — G-Cyrillus, Mar 20 '20 at 21:43
sorry. I didn't realize you were asking a question. What you have below is written in html/bootstrap and not utilizing bootstrapVue components. I'm trying to figure out how to push the components down to the bottom of the card while utilizing boostrapvue components. — Quickee, Mar 20 '20 at 22:04
you do need to set here and there the appropriate class to link to the CSS/styling behavior you look for ;) here col-md-6 is not a flex box, therefore, the content will not use entire height. make col-md-6 also a flex box via .row or .d-flex ;) my answer used .row — G-Cyrillus, Mar 20 '20 at 22:10
I believe you are suggestion this but this doesn't not work either. — Quickee, Mar 20 '20 at 22:14
i added the boostrap-vue code to my answer ;) demo online : https://codepen.io/gc-nomade/pen/WNvKPeJ — G-Cyrillus, Mar 20 '20 at 22:17
i think your comment above about the content not taking the entire column height is more elegant. And allows the default padding and position to stand. and then class="mt-auto" on the button gives the right behavior — Quickee, Mar 20 '20 at 23:44

G-Cyrillus · Answer 1 · 2020-03-20T22:27:09.537

the col element must be turned into a flex box too, so the child will stretch to its entire height so the flex-child box, stretching as a flex child does, will behave as expected:

Démo below

;)

window.onload = () => {
  new Vue({ el: '#app' })
}

body { padding: 1rem; }

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.css" rel="stylesheet"/>
<div id="app">
  <section>
    <b-card no-body class="overflow-hidden" style="max-width: 540px;">
       <b-row no-gutters>
          <b-col md="6">
             <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
          </b-col>
          <b-col class="row" md="6">
            <b-card-body class="d-flex flex-column">
              <h2>Course Check List</h2>
              <b-card-text>
                Here is the description of the course
              </b-card-text>

              <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
           </b-card-body>

          </b-col>
       </b-row>
     </b-card>
  </section>
</div>

in bootstrap-vue, it would be :

<section>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
     <b-row no-gutters>
        <b-col md="6">
           <b-card-img src="https://picsum.photos/400/400" class="rounded-0"></b-card-img>
        </b-col>
        <b-col class="row" md="6">
          <b-card-body class="d-flex flex-column">
            <h2>Course Check List</h2>
            <b-card-text>
              Here is the description of the course
            </b-card-text>

            <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
         </b-card-body>

        </b-col>
     </b-row>
   </b-card>
</section>

and to answer the button question , i do work every day even that most of us are to stay home, i'm one of those needed to care about who cannot for themselves ... please, stay home, don't put your beloved ones at risk

score 0 · Answer 2 · answered Mar 20 '20 at 23:52

@G-Cyrillus answer does work, but with a little finesse.

However, he mentioned in a comment that the card-body was not taking up the entire space of the column. So adding height of 100% fixed the issue and is a bit more elegant.

<b-card-body class="h-100 d-flex flex-column">
  <h2>Course Check List</h2>
    <b-card-text>
       Here is the description of the course
    </b-card-text>
  <b-button  class="mt-auto" href="#" variant="primary">Why Aren't You Working</b-button>
</b-card-body>

BootstrapVue how to push b-button to bottom of b-card element

2 Answers2