Creating layouts using Bootstrap classes
Before we start implementing a layout for our workouts page, let me remind you what the mockup looks like:
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...