From 822acd002b33098729f6f5d0f3ca0ae2a9061c8d Mon Sep 17 00:00:00 2001
From: YevheniiaMazur <yevheniia.mazur@valor-software.com>
Date: Wed, 14 Mar 2018 17:59:59 +0200
Subject: [PATCH 1/8] docs(datepicker): add disabling button to Disabled
 datepicker demo (#3988)

---
 .../components/+datepicker/datepicker-section.list.ts  |  4 ++--
 .../+datepicker/demos/disabled/disabled.component.html | 10 +++++++---
 .../+datepicker/demos/disabled/disabled.component.ts   |  4 ++++
 demo/src/ng-api-doc.ts                                 | 10 ++++++++--
 src/datepicker/bs-datepicker.component.ts              |  2 +-
 src/datepicker/bs-daterangepicker.component.ts         |  2 +-
 6 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index 2668a85554..f4bb825300 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
       },
       {
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/ng-api-doc.ts b/demo/src/ng-api-doc.ts
index 616e993e2a..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",
@@ -795,6 +795,12 @@ export const ngdoc: any = {
         "type": "Date",
         "description": "<p>Default min date for all date/range pickers</p>\n"
       },
+      {
+        "name": "rangeInputFormat",
+        "defaultValue": "L",
+        "type": "string",
+        "description": "<p>Date format for date range input field</p>\n"
+      },
       {
         "name": "showWeekNumbers",
         "defaultValue": "true",
@@ -839,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;
   /**

From dbc43c6614d318189f3b20a5209d8034e68ff8f2 Mon Sep 17 00:00:00 2001
From: YevheniiaMazur <yevheniia.mazur@valor-software.com>
Date: Wed, 14 Mar 2018 18:00:21 +0200
Subject: [PATCH 2/8] docs(datepicker): mark properties names as code for
 initial state datepicker demo (#3982)

---
 .../demos/date-initial-state/date-initial-state.html          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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">

From feee23ebaa97aeb2784024785256af8903038493 Mon Sep 17 00:00:00 2001
From: YevheniiaMazur <yevheniia.mazur@valor-software.com>
Date: Wed, 14 Mar 2018 18:00:47 +0200
Subject: [PATCH 3/8] docs(alert): mark property name as code for basic alert
 demo (#3979)

---
 demo/src/app/components/+alerts/alerts-section.list.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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

From 856fcd653b3707fc2638f215639071f6186c3bdb Mon Sep 17 00:00:00 2001
From: Artur <olshansky0@gmail.com>
Date: Wed, 14 Mar 2018 18:01:04 +0200
Subject: [PATCH 4/8] docs(collapse): decompose Basic demo (#3977)

close #3789
---
 .../+collapse/collapse-section.list.ts         | 10 ++++++++++
 .../+collapse/demos/basic/basic.html           |  5 +----
 .../components/+collapse/demos/basic/basic.ts  | 10 +---------
 .../+collapse/demos/events/events.html         | 17 +++++++++++++++++
 .../+collapse/demos/events/events.ts           | 18 ++++++++++++++++++
 .../app/components/+collapse/demos/index.ts    |  2 ++
 6 files changed, 49 insertions(+), 13 deletions(-)
 create mode 100644 demo/src/app/components/+collapse/demos/events/events.html
 create mode 100644 demo/src/app/components/+collapse/demos/events/events.ts

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
 ];

From be14f34dae26d354038a0cb2b533c36a7da9e00f Mon Sep 17 00:00:00 2001
From: anil kumar kothapalli <anil-kk@users.noreply.github.com>
Date: Wed, 14 Mar 2018 17:02:03 +0100
Subject: [PATCH 5/8] feat(old-datepicker): adding id for tag (#3695)

* adding id for tag

adding id for tag similar to month component

* using [attr.id]

* using id attribute

using id attribute at this level similar to day and month picker
---
 src/datepicker/monthpicker.component.ts | 2 +-
 src/datepicker/yearpicker.component.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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"

From 7062bc1c5008fed8a6e70c7080c376cdf7924652 Mon Sep 17 00:00:00 2001
From: YevheniiaMazur <yevheniia.mazur@valor-software.com>
Date: Thu, 15 Mar 2018 13:38:11 +0200
Subject: [PATCH 6/8] docs(datepicker): edit description for Forms datepicker
 demo (#4001)

---
 demo/src/app/components/+datepicker/datepicker-section.list.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/src/app/components/+datepicker/datepicker-section.list.ts b/demo/src/app/components/+datepicker/datepicker-section.list.ts
index f4bb825300..baeacc196c 100644
--- a/demo/src/app/components/+datepicker/datepicker-section.list.ts
+++ b/demo/src/app/components/+datepicker/datepicker-section.list.ts
@@ -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
       },
       {

From 7dabe96be141786b0d562d7ab0750508c67008bf Mon Sep 17 00:00:00 2001
From: YevheniiaMazur <yevheniia.mazur@valor-software.com>
Date: Fri, 16 Mar 2018 16:43:00 +0200
Subject: [PATCH 7/8] docs(datepicker): fix description at placement datepicker
 demo by changing tag (#4006)

---
 .../components/+datepicker/demos/placement/placement.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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

From 4494459e7b383ba6c6efd7bcfb77cbfb68c6f4a7 Mon Sep 17 00:00:00 2001
From: Earle white <dancehallvid@gmail.com>
Date: Fri, 16 Mar 2018 10:44:05 -0400
Subject: [PATCH 8/8] chore(demos): fix modal event,confirm window,modal event
 (#3976)

---
 demo/src/app/components/+modal/demos/events/events.html   | 2 +-
 demo/src/app/components/+modal/demos/events/events.ts     | 8 +++++++-
 .../service-confirm-window/service-confirm-window.html    | 2 +-
 .../+modal/demos/service-events/service-events.html       | 2 +-
 .../+modal/demos/service-events/service-events.ts         | 8 +++++++-
 5 files changed, 17 insertions(+), 5 deletions(-)

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;