diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
index 55492779f8..7f85b9fba5 100644
--- a/demo/assets/css/style.css
+++ b/demo/assets/css/style.css
@@ -28,7 +28,7 @@ section {
 
 .page-header {
   padding-bottom: 9px;
-  margin: 40px 0 20px;
+  margin: 10px 0 40px;
   border-bottom: 1px solid #eee;
 }
 
@@ -246,3 +246,7 @@ pre {
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+
+#getting-started {
+  padding: 0;
+}
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
index 0806b4412a..cf06fc57eb 100644
--- a/demo/components/accordion-section.ts
+++ b/demo/components/accordion-section.ts
@@ -15,24 +15,25 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 @Component({
   selector: 'accordion-section',
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
+    <div class="description">${titleDoc}</div>
 
-    <div class="row">
+    <br/>
+
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <accordion-demo></accordion-demo>
       </div>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -46,10 +47,10 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
         </tab>
       </tabset>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
index 8ebc38fbba..5f1e2e70c8 100644
--- a/demo/components/alert-section.ts
+++ b/demo/components/alert-section.ts
@@ -17,24 +17,25 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 @Component({
   selector: 'alert-section',
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
 
-    <div class="row">
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <alert-demo></alert-demo>
       </div>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -48,10 +49,10 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
         </tab>
       </tabset>
     </div>
-
-    <br>
-
-    <div class="row">
+    
+    <br/>
+      
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
index d343396b40..72e1d3e02d 100644
--- a/demo/components/buttons-section.ts
+++ b/demo/components/buttons-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
   selector: 'buttons-section',
   directives: [ButtonsDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <buttons-demo></buttons-demo>
       </div>
     </div>
 
-    <br>
-
-    <div class="row">
+    <br/>
+    
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `
diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
index 0bfc15a106..69e32829c3 100644
--- a/demo/components/carousel-section.ts
+++ b/demo/components/carousel-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
   selector: 'carousel-section',
   directives: [CarouselDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <carousel-demo></carousel-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `
diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
index 9c54c22e94..657a5ec1a8 100644
--- a/demo/components/collapse-section.ts
+++ b/demo/components/collapse-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
   selector: 'collapse-section',
   directives: [CollapseDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <collapse-demo></collapse-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `
diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
index 1d053b0053..493caea016 100644
--- a/demo/components/datepicker-section.ts
+++ b/demo/components/datepicker-section.ts
@@ -19,24 +19,25 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
 })
 @View({
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <datepicker-demo></datepicker-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -51,9 +52,9 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/demo-header.ts b/demo/components/demo-header.ts
index 5acb094198..66a1f5c14f 100644
--- a/demo/components/demo-header.ts
+++ b/demo/components/demo-header.ts
@@ -39,7 +39,7 @@ let template = `
         </ul>
       </nav>
       <nav class="visible-xs hidden-md-up">
-        <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="!isCollapsed" (click)="isCollapsed = !isCollapsed; true">
+        <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="isCollapsed" (click)="isCollapsed = !isCollapsed; true">
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#migration">Migration</a></li>
           <li *ngFor="#comp of components" class="nav-item"><a class="dropdown-item nav-link" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>
diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
index 61d30cb242..4de1b8cd25 100644
--- a/demo/components/dropdown-section.ts
+++ b/demo/components/dropdown-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
   selector: 'dropdown-section',
   directives: [DropdownDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <dropdown-demo></dropdown-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `
diff --git a/demo/components/pagination-section.ts b/demo/components/pagination-section.ts
index 2ddc11e5b7..0fc7e7ac2c 100644
--- a/demo/components/pagination-section.ts
+++ b/demo/components/pagination-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html');
   selector: 'pagination-section',
   directives: [PaginationDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <pagination-demo></pagination-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./pagination/pagination-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/progressbar-section.ts b/demo/components/progressbar-section.ts
index 088665bf92..aadf36e4db 100644
--- a/demo/components/progressbar-section.ts
+++ b/demo/components/progressbar-section.ts
@@ -26,24 +26,25 @@ let html = templates[Ng2BootstrapConfig.theme];
   selector: 'progressbar-section',
   directives: [ProgressbarDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <progressbar-demo></progressbar-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -58,9 +59,9 @@ let html = templates[Ng2BootstrapConfig.theme];
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/rating-section.ts b/demo/components/rating-section.ts
index 676d5af938..2061f1895b 100644
--- a/demo/components/rating-section.ts
+++ b/demo/components/rating-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html');
   selector: 'rating-section',
   directives: [RatingDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <rating-demo></rating-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./rating/rating-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/tabs-section.ts b/demo/components/tabs-section.ts
index a52f46cbab..c6fa4c2704 100644
--- a/demo/components/tabs-section.ts
+++ b/demo/components/tabs-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html');
   selector: 'tabs-section',
   directives: [TabsDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <tabs-demo></tabs-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./tabs/tabs-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/timepicker-section.ts b/demo/components/timepicker-section.ts
index 56524352b1..072dadd956 100644
--- a/demo/components/timepicker-section.ts
+++ b/demo/components/timepicker-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html');
   selector: 'timepicker-section',
   directives: [TimepickerDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <timepicker-demo></timepicker-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./timepicker/timepicker-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/tooltip-section.ts b/demo/components/tooltip-section.ts
index e1576bd06c..963badf023 100644
--- a/demo/components/tooltip-section.ts
+++ b/demo/components/tooltip-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html');
   selector: 'tooltip-section',
   directives: [TooltipDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <tooltip-demo></tooltip-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./tooltip/tooltip-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/components/typeahead-section.ts b/demo/components/typeahead-section.ts
index 10170fd997..fa1ead63d0 100644
--- a/demo/components/typeahead-section.ts
+++ b/demo/components/typeahead-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html');
   selector: 'typeahead-section',
   directives: [TypeaheadDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <typeahead-demo></typeahead-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,9 +51,9 @@ let html = require('!!prismjs?lang=markup!./typeahead/typeahead-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
diff --git a/demo/index.ts b/demo/index.ts
index 0d78dd3242..44e31a59ef 100644
--- a/demo/index.ts
+++ b/demo/index.ts
@@ -2,8 +2,8 @@
 import {
   Component, View, enableProdMode,
 } from 'angular2/core';
-import { CORE_DIRECTIVES } from 'angular2/common';
-import { bootstrap } from 'angular2/platform/browser';
+import {CORE_DIRECTIVES} from 'angular2/common';
+import {bootstrap} from 'angular2/platform/browser';
 
 import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';
 
@@ -53,38 +53,36 @@ let gettingStarted = require('./getting-started.md');
     </div>
   </main>
 
-
   <div class="container">
-    <div class="col-md-12 card card-block panel panel-default">
-      <selection>
-          <h1>ng2-bootstrap available with:
-          <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: isBs3}" href="./">Bootstrap 3</a>
-          <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: !isBs3}" href="./index-bs4.html">Bootstrap 4</a>
-          </h1>
-      </selection>
-    </div>
-    <br>
+    <h1 id="overview" class="page-header">
+      ng2-bootstrap available with:
+      <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: isBs3}" href="./">Bootstrap 3</a>
+      <a class="btn btn-default btn-secondary btn-lg" [ngClass]="{active: !isBs3}" href="./index-bs4.html">Bootstrap 4</a>
+    </h1>
+    
     <section id="getting-started">${gettingStarted}</section>
 
-    <accordion-section class="col-md-12"></accordion-section>
-    <alert-section class="col-md-12"></alert-section>
-    <buttons-section class="col-md-12"></buttons-section>
-    <carousel-section class="col-md-12"></carousel-section>
-    <collapse-section class="col-md-12"></collapse-section>
-    <datepicker-section class="col-md-12"></datepicker-section>
-    <dropdown-section class="col-md-12"></dropdown-section>
-    <pagination-section class="col-md-12"></pagination-section>
-    <progressbar-section class="col-md-12"></progressbar-section>
-    <rating-section class="col-md-12"></rating-section>
-    <tabs-section class="col-md-12"></tabs-section>
-    <timepicker-section class="col-md-12"></timepicker-section>
-    <tooltip-section class="col-md-12"></tooltip-section>
-    <typeahead-section class="col-md-12"></typeahead-section>
+    <accordion-section></accordion-section>
+    <alert-section></alert-section>
+    <buttons-section></buttons-section>
+    <carousel-section></carousel-section>
+    <collapse-section></collapse-section>
+    <datepicker-section></datepicker-section>
+    <dropdown-section></dropdown-section>
+    <pagination-section></pagination-section>
+    <progressbar-section></progressbar-section>
+    <rating-section></rating-section>
+    <tabs-section></tabs-section>
+    <timepicker-section></timepicker-section>
+    <tooltip-section></tooltip-section>
+    <typeahead-section></typeahead-section>
   </div>
 
   <footer class="footer">
     <div class="container">
-      <p class="text-muted text-center"><a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.</p>
+      <p class="text-muted text-center">
+        <a href="https://github.com/valor-software/ng2-bootstrap">ng2-bootstrap</a> is maintained by <a href="https://github.com/valor-software">valor-software</a>.
+      </p>
     </div>
   </footer>
   `,