angular2 not applying bootstrap class
<p>I am  have to bootstrap my angular2 component its not applying any bootstrap styling to html</p>

<p>here is my component login.ts</p>

<pre><code>///&lt;reference path="../../../node_modules/angular2/typings/node/node.d.ts" /&gt;

import {Component, View} from 'angular2/core';
import {FormBuilder,  FORM_DIRECTIVES } from 'angular2/common';
@Component({
  selector: 'login',    
})
@View({
  templateUrl: '/scripts/src/components/login/login.html',
  directives: [FORM_DIRECTIVES]
})

export class login {

}
</code></pre>

<p>here is my login template :</p>

<pre><code>&lt;div class="col-lg-4 col-lg-offset-4"&gt;
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading" ng-class="panel-heading"&gt;
            &lt;h4&gt;Login&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;User Name&lt;/label&gt;
                &lt;input type="text" class="form-control" placeholder="Please enter username"/&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
                &lt;label&gt;Password&lt;/label&gt;
                &lt;input type="text" class="form-control"  placeholder="Please enter password"/&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="panel-footer text-left"&gt;
            &lt;button class="btn btn-primary"&gt;Login&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

export class login {

}
</code></pre>

<p>here is my bootstrap.ts</p>

<pre><code>//import {bootstrap} from 'angular2/angular2';
///&lt;reference path="../node_modules/angular2/typings/node/node.d.ts" /&gt;
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {login} from './components/login/login';

bootstrap(login);
</code></pre>

<p>here  is my index.html </p>

<pre><code>&lt;!doctype HTML&gt;
&lt;html&gt;

&lt;head&gt;

    &lt;script src="/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;script src="/angular2/bundles/upgrade.dev.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;login&gt;Loading......&lt;/login&gt;
    &lt;/div&gt;
    &lt;script&gt;
       System.config({
            defaultJSExtensions: true,
        packages: {        
          app: {
            defaultExtension: 'js'
          }
        },
        paths: {
            'angular2/upgrade': '../node_modules/angular2/upgrade'
          }

      });
        System.import('scripts/src/bootstrap');
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>but when i run my app it give me output as </p>

<p><a href="https://i.stack.imgur.com/5KhOy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5KhOy.jpg" alt="enter image description here"></a></p>

<p>please help to style my app.</p>

<p><strong>what changes i need to do if i have to use material design</strong></p>