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:

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 most basic layout element and are required when we need to use Bootstrap's default grid system, which is flexbox-based and mobile friendly. A grid system, basically, is one that uses rows to divide a page vertically and, inside each row, it uses a twelve-column system to divide that row horizontally. In our UI, the logo, the tagline, and the registration form are aligned in the center of the page. Therefore, we will put them in the same wrapper, which will be a <div> tag. We will put the page footer inside a <footer> tag. This is a high-level overview of the layout. Let's dive deeper.