diff --git a/demo/src/app/components/+alerts/alerts-section.list.ts b/demo/src/app/components/+alerts/alerts-section.list.ts
index 431e6b032d..38e0ca80d6 100644
--- a/demo/src/app/components/+alerts/alerts-section.list.ts
+++ b/demo/src/app/components/+alerts/alerts-section.list.ts
@@ -39,8 +39,7 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>Alerts are available for any length of text, as well as an optional dismiss
           button. For proper styling, use one of the four <strong>required</strong>
           contextual classes (e.g., <code>.alert-success</code>). For inline
-          dismissal, use the <a routerLink="." fragment="dismissing"><code>dismiss
-          property</code></a>.</p>`,
+          dismissal, use the <code>dismissible</code> property.</p>`,
         component: require('!!raw-loader?lang=typescript!./demos/basic/basic'),
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: DemoAlertBasicComponent
diff --git a/demo/src/app/components/+collapse/collapse-section.list.ts b/demo/src/app/components/+collapse/collapse-section.list.ts
index 87d73a3ccf..bbd39daa3a 100644
--- a/demo/src/app/components/+collapse/collapse-section.list.ts
+++ b/demo/src/app/components/+collapse/collapse-section.list.ts
@@ -1,5 +1,6 @@
 import { CollapseDemoComponent } from './demos/basic/basic';
 import { ToggleManualDemoComponent } from './demos/toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './demos/events/events';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -30,6 +31,15 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/basic/basic.html'),
         outlet: CollapseDemoComponent
       },
+      {
+        title: 'Events',
+        anchor: 'events',
+        component: require('!!raw-loader?lang=typescript!./demos/events/events'),
+        html: require('!!raw-loader?lang=markup!./demos/events/events.html'),
+        description: `Collapse directive exposes 2 events: <code>collapsed</code>, that fires when a content was hidden, 
+                      and <code>expanded</code>, that fires when a content was shown`,
+        outlet: CollapseDemoEventsComponent
+      },
       {
         title: 'Manual toggle',
         anchor: 'manual-toggle',
diff --git a/demo/src/app/components/+collapse/demos/basic/basic.html b/demo/src/app/components/+collapse/demos/basic/basic.html
index fc68006f1a..924540b4c3 100644
--- a/demo/src/app/components/+collapse/demos/basic/basic.html
+++ b/demo/src/app/components/+collapse/demos/basic/basic.html
@@ -2,9 +2,6 @@
         (click)="isCollapsed = !isCollapsed">Toggle collapse
 </button>
 <hr>
-<div (collapsed)="collapsed($event)"
-     (expanded)="expanded($event)"
-     [collapse]="isCollapsed"
-     class="card card-block card-header">
+<div [collapse]="isCollapsed" class="card card-block card-header">
   <div class="well well-lg">Some content</div>
 </div>
diff --git a/demo/src/app/components/+collapse/demos/basic/basic.ts b/demo/src/app/components/+collapse/demos/basic/basic.ts
index 1ba3b8b3b2..8e3c87e2b2 100644
--- a/demo/src/app/components/+collapse/demos/basic/basic.ts
+++ b/demo/src/app/components/+collapse/demos/basic/basic.ts
@@ -5,13 +5,5 @@ import { Component } from '@angular/core';
   templateUrl: './basic.html'
 })
 export class CollapseDemoComponent {
-  isCollapsed: boolean = false;
-
-  collapsed(event: any): void {
-    console.log(event);
-  }
-
-  expanded(event: any): void {
-    console.log(event);
-  }
+  isCollapsed = false;
 }
diff --git a/demo/src/app/components/+collapse/demos/events/events.html b/demo/src/app/components/+collapse/demos/events/events.html
new file mode 100644
index 0000000000..e639612bed
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/events/events.html
@@ -0,0 +1,17 @@
+<div class="row">
+  <div class="col-md-3">
+    <button type="button" class="btn btn-primary"
+            (click)="isCollapsed = !isCollapsed">Toggle collapse
+    </button>
+  </div>
+  <div class="col-md-9">
+    <pre class="card card-block card-header">Event: {{message}}</pre>
+  </div>
+</div>
+<hr>
+<div (collapsed)="collapsed()"
+     (expanded)="expanded()"
+     [collapse]="isCollapsed"
+     class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>
diff --git a/demo/src/app/components/+collapse/demos/events/events.ts b/demo/src/app/components/+collapse/demos/events/events.ts
new file mode 100644
index 0000000000..759d80125e
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/events/events.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'collapse-demo-events',
+  templateUrl: './events.html'
+})
+export class CollapseDemoEventsComponent {
+  isCollapsed = false;
+  message: string;
+
+  collapsed(): void {
+    this.message = 'collapsed';
+  }
+
+  expanded(): void {
+    this.message = 'expanded';
+  }
+}
diff --git a/demo/src/app/components/+collapse/demos/index.ts b/demo/src/app/components/+collapse/demos/index.ts
index 537e939678..f62c5b51a6 100644
--- a/demo/src/app/components/+collapse/demos/index.ts
+++ b/demo/src/app/components/+collapse/demos/index.ts
@@ -1,9 +1,11 @@
 import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
+import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
+  CollapseDemoEventsComponent,
   ToggleManualDemoComponent,
   DemoAccessibilityComponent
 ];
diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index 2668a85554..baeacc196c 100644
--- a/demo/src/app/components/+datepicker/datepicker-section.list.ts
+++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -147,11 +147,11 @@ export const demoComponentContent: ContentSection[] = [
         outlet: DemoDatepickerMinMaxComponent
       },
       {
-        title: 'Disabled (scratch, WIP)',
+        title: 'Disabled',
         anchor: 'disabled-datepicker',
         component: require('!!raw-loader?lang=typescript!./demos/disabled/disabled.component.ts'),
         html: require('!!raw-loader?lang=markup!./demos/disabled/disabled.component.html'),
-        description: `<p>If you want to disable datepicker set <code>isDisabled</code> property to true</p>`,
+        description: `<p>If you want to disable datepicker's or daterangepicker's content set <code>isDisabled</code> property to true</p>`,
         outlet: DemoDatepickerDisabledComponent
       },
       {
@@ -160,7 +160,8 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader?lang=typescript!./demos/forms/forms.component.ts'),
         html: require('!!raw-loader?lang=markup!./demos/forms/forms.component.html'),
         description: `<p>Datepicker and daterangepicker can be used in forms. Keep in mind that
-          value of <code>ngModel</code> is <code>Date</code> object (array of 2 object for daterangepicker)</p>`,
+          value of <code>ngModel</code> is <code>Date</code> object for datepicker and array of 2 
+          <code>Date</code> objects for daterangepicker</p>`,
         outlet: DemoDatepickerFormsComponent
       },
       {
diff --git a/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
index e34993e8a5..eb006e2589 100644
--- a/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
+++ b/demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html
@@ -1,4 +1,4 @@
-<p>bsValue property sets initial state in this example</p>
+<p><code>bsValue</code> property sets initial state in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input type="text"
@@ -12,7 +12,7 @@
   </div>
 </div>
 
-<p>ngModel property sets two-way data binding in this example</p>
+<p><code>ngModel</code> property sets two-way data binding in this example</p>
 <div class="row">
   <div class="col-xs-12 col-12 col-md-4 form-group">
     <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
diff --git a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
index 16c9405d94..cabd39b359 100644
--- a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
+++ b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
@@ -1,9 +1,13 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
+    <input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker"
+           [isDisabled]="isDisabled">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
-    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker">
+    <input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker"
+           [isDisabled]="isDisabled">
+  </div>
+  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group">
+    <button class="btn btn-success" (click)="toggleDisabling()">Toggle disabling</button>
   </div>
 </div>
-
diff --git a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
index 8e0a49cff5..b5e164a2c0 100644
--- a/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
+++ b/demo/src/app/components/+datepicker/demos/disabled/disabled.component.ts
@@ -6,4 +6,8 @@ import { Component } from '@angular/core';
 })
 export class DemoDatepickerDisabledComponent {
   isDisabled = false;
+
+  toggleDisabling(): void {
+    this.isDisabled = !this.isDisabled;
+  }
 }
diff --git a/demo/src/app/components/+datepicker/demos/placement/placement.html b/demo/src/app/components/+datepicker/demos/placement/placement.html
index a6d56a3226..499a072a9b 100644
--- a/demo/src/app/components/+datepicker/demos/placement/placement.html
+++ b/demo/src/app/components/+datepicker/demos/placement/placement.html
@@ -1,27 +1,27 @@
 <div class="row">
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is right</label>
+    <p>The datepicker's placement is right</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="right">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is top</label>
+    <p>The datepicker's placement is top</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="top">
   </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is bottom</label>
+    <p>The datepicker's placement is bottom</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
       placement="bottom">
     </div>
   <div class="col-xs-12 col-12 col-sm-6 col-md-3 form-group">
-    <label>The datepicker's placement is left</label>
+    <p>The datepicker's placement is left</p>
     <input class="form-control"
       placeholder="Datepicker"
       bsDatepicker
diff --git a/demo/src/app/components/+modal/demos/events/events.html b/demo/src/app/components/+modal/demos/events/events.html
index f902c43abb..6ef0ac6e04 100644
--- a/demo/src/app/components/+modal/demos/events/events.html
+++ b/demo/src/app/components/+modal/demos/events/events.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 
 <div class="modal fade" bsModal #modal="bs-modal" tabindex="-1" role="dialog"
      aria-labelledby="mySmallModalLabel" aria-hidden="true"
diff --git a/demo/src/app/components/+modal/demos/events/events.ts b/demo/src/app/components/+modal/demos/events/events.ts
index f944b2ac26..4f4f6af647 100644
--- a/demo/src/app/components/+modal/demos/events/events.ts
+++ b/demo/src/app/components/+modal/demos/events/events.ts
@@ -3,7 +3,13 @@ import { ModalDirective } from 'ngx-bootstrap/modal';
 
 @Component({
   selector: 'demo-modal-events',
-  templateUrl: './events.html'
+  templateUrl: './events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalEventsComponent {
   @ViewChild(ModalDirective) modal: ModalDirective;
diff --git a/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html b/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
index b0b7dd2cd9..87bde728d1 100644
--- a/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
+++ b/demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre>{{message}}</pre>
+<pre class="card card-block card-header">{{message}}</pre>
 <ng-template #template>
   <div class="modal-body text-center">
     <p>Do you want to confirm?</p>
diff --git a/demo/src/app/components/+modal/demos/service-events/service-events.html b/demo/src/app/components/+modal/demos/service-events/service-events.html
index 8464076b76..3c32f28238 100644
--- a/demo/src/app/components/+modal/demos/service-events/service-events.html
+++ b/demo/src/app/components/+modal/demos/service-events/service-events.html
@@ -1,6 +1,6 @@
 <button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
 <br><br>
-<pre *ngFor="let message of messages">{{message}}</pre>
+<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
diff --git a/demo/src/app/components/+modal/demos/service-events/service-events.ts b/demo/src/app/components/+modal/demos/service-events/service-events.ts
index ef72830609..294bb060a0 100644
--- a/demo/src/app/components/+modal/demos/service-events/service-events.ts
+++ b/demo/src/app/components/+modal/demos/service-events/service-events.ts
@@ -8,7 +8,13 @@ import 'rxjs/add/observable/combineLatest';
 
 @Component({
   selector: 'demo-modal-service-events',
-  templateUrl: './service-events.html'
+  templateUrl: './service-events.html',
+  styles: [`
+    .card {
+      margin-bottom: 0.75rem;
+      padding: 8px;
+    }
+  `]
 })
 export class DemoModalServiceEventsComponent {
   modalRef: BsModalRef;
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 04cc88abfd..70a6e7fa31 100644
--- a/demo/src/ng-api-doc.ts
+++ b/demo/src/ng-api-doc.ts
@@ -695,7 +695,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether datepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether datepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",
@@ -845,7 +845,7 @@ export const ngdoc: any = {
       {
         "name": "isDisabled",
         "type": "boolean",
-        "description": "<p>Indicates whether daterangepicker is enabled or not</p>\n"
+        "description": "<p>Indicates whether daterangepicker&#39;s content is enabled or not</p>\n"
       },
       {
         "name": "isOpen",
diff --git a/src/datepicker/bs-datepicker.component.ts b/src/datepicker/bs-datepicker.component.ts
index 0b96ff77c1..b4ccb1a88f 100644
--- a/src/datepicker/bs-datepicker.component.ts
+++ b/src/datepicker/bs-datepicker.component.ts
@@ -77,7 +77,7 @@ export class BsDatepickerDirective implements OnInit, OnDestroy, OnChanges {
    */
   @Input() bsConfig: Partial<BsDatepickerConfig>;
   /**
-   * Indicates whether datepicker is enabled or not
+   * Indicates whether datepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**
diff --git a/src/datepicker/bs-daterangepicker.component.ts b/src/datepicker/bs-daterangepicker.component.ts
index b2d3a72685..7c744d7f25 100644
--- a/src/datepicker/bs-daterangepicker.component.ts
+++ b/src/datepicker/bs-daterangepicker.component.ts
@@ -77,7 +77,7 @@ export class BsDaterangepickerDirective
    */
   @Input() bsConfig: Partial<BsDaterangepickerConfig>;
   /**
-   * Indicates whether daterangepicker is enabled or not
+   * Indicates whether daterangepicker's content is enabled or not
    */
   @Input() isDisabled: boolean;
   /**
diff --git a/src/datepicker/monthpicker.component.ts b/src/datepicker/monthpicker.component.ts
index bb10e8365e..486a17baf1 100644
--- a/src/datepicker/monthpicker.component.ts
+++ b/src/datepicker/monthpicker.component.ts
@@ -31,7 +31,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid" [ngClass]="dtz.customClass">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"
diff --git a/src/datepicker/yearpicker.component.ts b/src/datepicker/yearpicker.component.ts
index fd88ba29d7..2348898072 100644
--- a/src/datepicker/yearpicker.component.ts
+++ b/src/datepicker/yearpicker.component.ts
@@ -32,7 +32,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   </thead>
   <tbody>
     <tr *ngFor="let rowz of rows">
-      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
+      <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [attr.id]="dtz.uid">
         <button type="button" style="min-width:100%;" class="btn btn-default"
                 [ngClass]="{'btn-link': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected || (isBs4 && !dtz.selected && datePicker.isActive(dtz)), disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz)}"
                 [disabled]="dtz.disabled"