How to bottom align button in card, irrespective of the text in vuetify?
Just add an outer class to the card:
<v-card hover height="100%" class="card-outter">
and add card-actions class to v-card-actions
<v-card-actions class="card-actions">
css :
.card-outter {
padding-bottom: 50px;
}
.card-actions {
position: absolute;
bottom: 0;
}
Live example on codesandbox: https://codesandbox.io/s/vue-template-jsodz?fontsize=14
Add a margin to the bottom of your card, and then position the buttons absolutely from the bottom (with a bit of a margin too).
You can add classes d-flex flex-column
on your v-card
and add <v-spacer></v-spacer>
before the card actions.
<v-card class="d-flex flex-column">
<v-card-title>
...
</v-card-title>
<v-spacer></v-spacer>
<v-card-actions>
...
</v-card-actions>
</v-card>