Building Applications with Spring 5 and Vue.js 2

Implement the UI of the register page

Now, we have Bootstrap ready. Let's use it to create the register page, which looks like the UI design shown in the following figure:

Figure 9.1: UI of the register page

As you can see, on this page, we have a logo, a tagline, three fields, and one submit button. There are also some text, links, and a simple page footer. The main part of this page, the registration form, is positioned in the middle of the screen. Before we write any code, let's see how we're going to structure the layout of this page.

First of all, we will wrap everything on the page inside a container. In Bootstrap, containers are the ...