JavaScript by Example

Adding styles to the page

At the moment, the page is responsive, since it is built with Bootstrap. However, we still need to add a few style changes to the form. It is currently very large on desktop screens. Also, we need to align the title to the center of the page. Let's add styles for the index.html page.

To align the form and its title to the center of the page, in the styles.css file (src/css/styles.css), add the following code (make sure the Webpack dev server is running):

.form-area {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;}

The styles will be reflected immediately on the page, since HotModuleReplacement is enabled in Webpack (no more reloading!). Now, add some margin to the title and set ...