-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Vue.js 2 and Bootstrap 4 Web Development
By :
Before we start implementing a layout for our workouts page, let me remind you what the mockup looks like:

This is how we have defined things initially in our mockups
We will do some things slightly differently - something similar to what we have done in the settings page. Let's create the two-column layout that will stack on mobile devices. So, this mockup will be valid for mobile screens but it will display two columns on desktop devices.
Let's add two components – WorkoutsComponent.vue and NewWorkoutComponent.vue – inside the components/workouts folder. Add some dummy text to the templates of these new components and let's define our two-column layout in the workouts.vue page. You certainly remember that in order to have stack columns on small devices and different-sized columns on other devices, we have to use the col-*-<number> notation, where * represents the size of the device (sm for small, md for medium, lg for large, and so on) and the...