CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Andath
Andath

Reputation: 22714

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

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:

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?

Upvotes: 30

Views: 44640

Answers (2)

Roland
Roland

Reputation: 27719

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>

Change the v-spacer to not be self-enclosing tag.

Upvotes: 43

Toodoo
Toodoo

Reputation: 8750

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>

Upvotes: 15

Related Questions