How can I align content to right inside v-col? - vuetify.js

Question

In the document, justify-** and align-** are design for determine where the grid block should be placed, but how can I make the content inside the v-col align to right?

Answer 1

Here is a small example that aligns content to the right inside v-col (in this case a close button):
<v-row>
<v-col align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
Or with multiple columns:
<v-row>
<v-col cols="9">
<h2>Title</h2>
</v-col>
<v-col cols="3" align="right">
<v-btn color="error">X</v-btn>
</v-col>
</v-row>
So you simply need to add
align="right"
as a parameter at v-col to align content to the right side within a v-col.

Answer 2

Bit late to this. I came here for a solution and ended up RTM. align="right" doesn't work for all components inside v-col. The way to left/right/center align is to use v-spacer. If you want to right align, add a v-spacer to the left of your component inside of v-col. v-col also needs d-flex class.
<v-app>
<v-container>
<v-row>
<v-col cols="8">
</v-col>
<v-col class="d-flex" cols="4">
<v-spacer />
<!-- insert any other content here to right align inside this col -->
</v-col>
</v-row>
</v-container>
<v-app>
You can also add the class .text-right if you're trying to align a button or text

Answer 3

According to the code of the Playground example in Vuetify's Grid System page, you could put an EXTRA v-row inside your v-col, and use justify-** in this newly added v-row. E.g.:
<v-app>
<v-container>
<v-row>
<!-- first column -->
<v-col cols="8">
<!-- the extra row -->
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-col>
<v-col cols="4">
Second column
</v-col>
</v-row>
</v-container>
<v-app>
Or, if the v-col is the ONLY column in your first-level v-row, you MAY get rid of that, just put your content in the v-row to which you can apply the justify. E.g.:
<v-app>
<v-container>
<v-row justify="center">
<p>Your Content</p>
</v-row>
</v-container>
<v-app>