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).

enter image description here


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>