-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Vue.js 2 and Bootstrap 4 Web Development
By :
We have just implemented the authentication mechanism for our ProFitOro application. That's great, but the UI of our authentication page looks as if we've used a time machine and gone back 20 years to the early days of the internet. Let's fix it using our powerful friend – Bootstrap.
First of all, I would like to make my landing page layout a two-column grid layout, so the whole sign-in/login belongs to the left column and the button that leads the user to the application without being registered stays on the right side. However, I would like these two columns to be stacked on mobile devices.
This is nothing new for you; I suppose that you remember how to use Bootstrap's grid layout in order to achieve this behavior: https://v4-alpha.getbootstrap.com/layout/grid/. So, in our LandingPage component, I will just wrap the authentication and go-to-app-link components into the div with the row class and add the corresponding col-* classes to these components...