Open the app/app.component.ts file in your editor again. Replace the template metadata with a templateUrl property that points to a new app/app.component.html template file as follows:

@Component({ 
    selector: 'my-app', 
     templateUrl: 'app/app.component.html', 
     directives: [ ROUTER_DIRECTIVES ] 
    }) 

Now we can add Bootstrap HTML markup to the app/app.component.html template file. We replace the navigation list with a responsive navbar, and we add some containers and other grid classes. We should end up with HTML code like the following:

    <div class="container"> 
     <div class="row"> 
       <h1>{{title}}</h1> 
     </div>   
    </div> 
    <nav class="navbar navbar-light bg-faded"> 
      <button class="navbar-toggler hidden-sm-up" type="button" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation...