How to center the text on vuetify footer?

Question

i am trying to create a Vuetify footer and i am running into some issues. I have made a Codepen here https://codepen.io/anon/pen/mYazWv.

I am new to vuetify so i'm trying to see how i can put the title in the center and push the checkbox to the right along with the buttons with using too many spacers

I am following the official vuetify docs https://vuetifyjs.com/en/components/footer

<v-footer
  height="auto"
  color="primary lighten-1"
>
  <v-card class="flex flat tile"> 
    <v-card-title class="primary lighten-1">
      <v-layout justify-center row wrap>

        <strong class="subheading white--text">
        Some Random Text
      </strong>
      </v-layout>


      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>
     <v-spacer></v-spacer>
      <v-spacer></v-spacer>
      <v-spacer></v-spacer>

 <v-checkbox dark label="Click Me"></v-checkbox>
        <v-btn v-on:click="saveClicked">
        <v-icon>save</v-icon> Save
      </v-btn>
        <v-btn>
          <v-icon>close</v-icon> Cancel
        </v-btn>
      </v-card-title>
    </v-card>

The v-spacer pushes the buttons in place but doesn't seem to apply on checkbox. Any help will be appreciated.

tao tao · Accepted Answer · 2019-06-02T03:05:50

Add grow class to <v-layout>.
Add shrink class to <v-checkbox>.

Updated pen.

Note: to align the title to left, remove flex and justify-center classes from <v-layout>.

How to center the text on vuetify footer?

1 Answers