From d8f42df84382c4442299686aa07d0fa6c8062c9c Mon Sep 17 00:00:00 2001
From: Douglas Webster <douglas.webster2107@gmail.com>
Date: Tue, 28 Feb 2017 16:41:50 +0000
Subject: [PATCH] fix(demo): bootstrap 4 demos card text formatting
 incorrectly. (#1656)

* Fix Bootstrap 4 and card text #1637

Moved card class to a surrounding div so text formats correctly with Bootstrap 4

* Fix Bootstrap 4 and card text #1637

Moved card class to a surrounding div so text formats correctly with Bootstrap 4
---
 .../+datepicker/demos/datepicker-demo.component.html         | 4 +++-
 demo/src/app/components/+rating/demos/basic/basic.html       | 5 +++--
 demo/src/app/components/+rating/demos/dynamic/dynamic.html   | 5 +++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html b/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html
index b13ae22cfb..ae9854253d 100644
--- a/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html
+++ b/demo/src/app/components/+datepicker/demos/datepicker-demo.component.html
@@ -12,7 +12,9 @@
 </style>
 
 <div>
-  <pre class="card card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
+  <div class="card">
+    <pre class="card-block card-header">Selected date is: <em *ngIf="dt">{{ getDate() | date:'fullDate'}}</em></pre>
+  </div>
   <h4>Inline</h4>
   <div style="display:inline-block; min-height:290px;">
     <datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="true" [dateDisabled]="dateDisabled"></datepicker>
diff --git a/demo/src/app/components/+rating/demos/basic/basic.html b/demo/src/app/components/+rating/demos/basic/basic.html
index 855c1ae52b..08a3609c1f 100644
--- a/demo/src/app/components/+rating/demos/basic/basic.html
+++ b/demo/src/app/components/+rating/demos/basic/basic.html
@@ -1,3 +1,4 @@
 <rating [(ngModel)]="rate" [max]="max" [readonly]="isReadonly"></rating>
-
-<pre class="card card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> </pre>
+<div class="card">
+    <pre class="card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b> </pre>
+</div>
\ No newline at end of file
diff --git a/demo/src/app/components/+rating/demos/dynamic/dynamic.html b/demo/src/app/components/+rating/demos/dynamic/dynamic.html
index 521047621b..f11cb5bfcb 100644
--- a/demo/src/app/components/+rating/demos/dynamic/dynamic.html
+++ b/demo/src/app/components/+rating/demos/dynamic/dynamic.html
@@ -4,8 +4,9 @@
 <span class="label"
       [ngClass]="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}"
       [ngStyle]="{display: (overStar && !isReadonly) ? 'inline' : 'none'}">{{percent}}%</span>
-
-<pre class="card card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b>;  Readonly is: <i>{{isReadonly}}</i>;  Hovering over: <b>{{overStar || "none"}}</b></pre>
+<div class="card">
+    <pre class="card-block card-header" style="margin:15px 0;">Rate: <b>{{rate}}</b>;  Readonly is: <i>{{isReadonly}}</i>;  Hovering over: <b>{{overStar || "none"}}</b></pre>
+</div>
 
 <button type="button" class="btn btn-sm btn-danger" (click)="rate = 0"
         [disabled]="isReadonly">Clear