CODEWITHSUNDEEP
cssvue.jsvuetify.js
rexbrandy
rexbrandy

Reputation: 155

Vuetify v-btn horizontal right

I'm trying to justity a v-btn to the right. I have tried everything and it's not working, I just want to know the easiest way to make the register button sit on the very right of the column.

Here is the Codepen and code.

<v-container>
    <v-row class='justify-center'>
      <v-col cols='6'>
        <v-form @submit.prevent='submitForm'>
          <v-text-field label='Username'></v-text-field>
          <v-text-field label='Password' type='password'></v-text-field>
          <v-btn type='submit' class='primary'>Login</v-btn>
          <v-btn class='ml-2'>Register</v-btn>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

Upvotes: 3

Views: 2370

Answers (3)

Andath
Andath

Reputation: 22714

I suggest you to wrap those 2 buttons within a row first. Then put each one of them in a column as follows:

  <v-container>
    <v-row class='justify-center'>
      <v-col cols='6'>
        <v-form @submit.prevent='submitForm'>
          <v-text-field label='Username'></v-text-field>
          <v-text-field label='Password' type='password'></v-text-field>
          <v-row>
            <v-col xs="6">
               <v-btn type='submit' class='primary'>Login</v-btn>
            </v-col>
            <v-col xs="6" class="d-flex justify-end">
               <v-btn>Register</v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-col>
    </v-row>
  </v-container>

The result of the above code is:

enter image description here

Upvotes: 3

Dvdgld
Dvdgld

Reputation: 2164

You can wrap your buttons in a div and set it to display:flex. Here is codepen. If you need both buttons to be on the right side replace justify-space-between with flex-end

Upvotes: 1

nbixler
nbixler

Reputation: 522

You can use flexboxes.

<div style="display:flex; justify-content:space-between">
    <div>
        <v-btn type='submit' class='primary'>Login</v-btn>
    </div>
    <div>
        <v-btn class='ml-2'>Register</v-btn>
    </div>

For more on flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 2

Related Questions