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

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.