[Vuejs]-Make the button in the center of screen

by

0👍

Your question is somehow unclear, but there are two options what do you want to achieve:

  1. Center buttons inside columns
<v-container>
    <v-row>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/viewRecipes" 
                   class="red accent-4">
                Explore Recipes
            </v-btn>
        </v-col>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/createrecipe" 
                   class="red accent-4">
                Create Recipes
            </v-btn>
        </v-col>
    </v-row>
</v-container>
  1. Center buttons on the page. In order to do so you need to modify your layout a bit and place your buttons inside one column
<v-container>
    <v-row>
        <v-col class="text-center">
            <v-btn large 
                   router 
                   to="/viewRecipes" 
                   class="red accent-4">
                Explore Recipes
            </v-btn>
            <v-btn large 
                   router 
                   to="/createrecipe" 
                   class="red accent-4">
                Create Recipes
            </v-btn>
        </v-col>
    </v-row>
</v-container>

Leave a comment