CODEWITHSUNDEEP
vue.jsvuetify.js
Joe
Joe

Reputation: 43

How to change the position of the button to the place we want?

I'm trying to create a web site (I'm a beginer in Vuetify ) , and I want to create a button at the extremity of the page(last row even in the center ,last column) , but this buttun still in the begin of the page , Here is my code :

<template>
<div>
<v-toolbar
  dark
  prominent
  src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>

<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Workers</v-toolbar-title>


</v-toolbar>

<v-row align="center">
 <v-col cols="12" sm="6">
 <v-btn x-large color="pink" >START</v-btn>
 </v-col> 
</v-row>


<v-navigation-drawer app 
v-model="drawer"
.
.
.
</v-navigation-drawer>
</div>
</template>

PS: the collor of the button also doesn't change

Thank you !

Upvotes: 1

Views: 3506

Answers (2)

beingyogi
beingyogi

Reputation: 1416

I think this should do the trick.

<v-row class="align-center">
 <v-col cols="12" sm="6" class="text-right">
 <v-btn x-large color="pink" >START</v-btn>
 </v-col> 
</v-row>

Upvotes: 1

jet_choong
jet_choong

Reputation: 433

When using v-row you can manipulate horizontal alignment using justify and vertical alignment using align like the official document points out.

For your case to align the button at the end:

<v-row justify="end">
  <v-btn>Button</v-btn>
</v-row>

Upvotes: 0

Related Questions