Vuetify.js: how to place button actions in v-card on left and right?

Question

In v-card-actions component of v-card, I want to place one button on the left and the other on the right using mr-0 (margin-right= 0), but the 2 buttons always stay close to each other.

What I tried:

• Prop left and right for the buttons
• v-spacer component between the buttons

Code:

<v-card>   <v-card-title primary-title>     <div>       <h3 class="headline mb-0">Ttile</h3>       <div>Located two hours south of Sydney in the <br>Southern Highlands of New South </div>     </div>   </v-card-title>    <v-card-actions>     <v-btn left>Share</v-btn>     <v-spacer />     <v-btn right>Explore</v-btn>   </v-card-actions> </v-card> 

Codepen.

How to solve this?

Answer 1

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.

Answer 2

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>