Creating layouts using Bootstrap classes

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...