Vuetify.js: how to place button actions in v-card on left and right?
Your code is correct. Just use this:
<v-card-actions>
<v-btn>Share</v-btn>
<v-spacer></v-spacer>
<v-btn>Explore</v-btn>
</v-card-actions>
So just change the v-spacer
to not be self-enclosing tag.
Just wrap them in v-flex
and add text-xs-right
class to the second, to pull to the right the second button.
<v-card-actions>
<v-flex>
<v-btn>Share</v-btn>
</v-flex>
<v-flex class="text-xs-right">
<v-btn>Explore</v-btn>
</v-flex>
</v-card-actions>
CodePen
Edit Vuetify 2.1.0 (thanks to @J. Unkrass) :
Just wrap them in v-col
and add text-right
class to the second, to pull to the right the second button.
<v-card-actions>
<v-col>
<v-btn>Share</v-btn>
</v-col>
<v-col class="text-right">
<v-btn>Explore</v-btn>
</v-col>
</v-card-actions>