HomeComponent

The next thing to do is to give a quick restyling to the HomeComponent.

Let's start with the home.component.html template file:

<div class="row">    <div class="col-lg-4">        <quiz-list class="latest"></quiz-list>    </div>    <div class="col-lg-4">        <quiz-list class="byTitle"></quiz-list>    </div>    <div class="col-lg-4">        <quiz-list class="random"></quiz-list>    </div></div>

We removed the sample title/subtitle we used back in Chapter 1, Getting Ready, and added some Bootstrap's grid system classes to ensure that the quiz-list elements will be properly stacked when using smaller-resolution devices.

For additional information on the Bootstrap grid system, check out https://getbootstrap.com/docs/3.3/css/#grid.

Once done, jump to the home.component.less ...

Get ASP.NET Core 2 and Angular 5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.