diff --git a/demo/src/app/components/+collapse/collapse-section.list.ts b/demo/src/app/components/+collapse/collapse-section.list.ts
index bbd39daa3a..5dbe3ab42f 100644
--- a/demo/src/app/components/+collapse/collapse-section.list.ts
+++ b/demo/src/app/components/+collapse/collapse-section.list.ts
@@ -7,6 +7,7 @@ import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo
 import { ExamplesComponent } from '../../docs/demo-section-components/demo-examples-section/index';
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
 import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
+import { InlineDisplayDemoComponent } from './demos/inline-display/inline-display';
 
 import { NgApiDocComponent } from '../../docs/api-docs';
 
@@ -47,6 +48,13 @@ export const demoComponentContent: ContentSection[] = [
         html: require('!!raw-loader?lang=markup!./demos/toggle-manual/toggle-manual.html'),
         outlet: ToggleManualDemoComponent
       },
+      {
+        title: 'Inline display',
+        anchor: 'inline-display',
+        component: require('!!raw-loader?lang=typescript!./demos/inline-display/inline-display'),
+        html: require('!!raw-loader?lang=markup!./demos/inline-display/inline-display.html'),
+        outlet: InlineDisplayDemoComponent
+      },
       {
         title: 'Accessibility',
         anchor: 'accessibility',
diff --git a/demo/src/app/components/+collapse/demos/index.ts b/demo/src/app/components/+collapse/demos/index.ts
index f62c5b51a6..b583030198 100644
--- a/demo/src/app/components/+collapse/demos/index.ts
+++ b/demo/src/app/components/+collapse/demos/index.ts
@@ -2,10 +2,12 @@ import { CollapseDemoComponent } from './basic/basic';
 import { ToggleManualDemoComponent } from './toggle-manual/toggle-manual';
 import { CollapseDemoEventsComponent } from './events/events';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
+import { InlineDisplayDemoComponent } from './inline-display/inline-display';
 
 export const DEMO_COMPONENTS = [
   CollapseDemoComponent,
   CollapseDemoEventsComponent,
   ToggleManualDemoComponent,
-  DemoAccessibilityComponent
+  DemoAccessibilityComponent,
+  InlineDisplayDemoComponent
 ];
diff --git a/demo/src/app/components/+collapse/demos/inline-display/inline-display.html b/demo/src/app/components/+collapse/demos/inline-display/inline-display.html
new file mode 100644
index 0000000000..6ed949c175
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/inline-display/inline-display.html
@@ -0,0 +1,10 @@
+<button type="button" class="btn btn-success" (click)="collapse.display='inline-block'"
+        aria-controls="collapseBasic">Inline-block
+</button>
+<button type="button" class="btn btn-primary" (click)="collapse.display='none'"
+        aria-controls="collapseBasic">None
+</button>
+<hr>
+<div id="collapseBasic" [collapse]="!isCollapsed" #collapse="bs-collapse" class="card card-block card-header">
+  <div class="well well-lg">Some content</div>
+</div>
diff --git a/demo/src/app/components/+collapse/demos/inline-display/inline-display.ts b/demo/src/app/components/+collapse/demos/inline-display/inline-display.ts
new file mode 100644
index 0000000000..e42eaa5d5d
--- /dev/null
+++ b/demo/src/app/components/+collapse/demos/inline-display/inline-display.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'inline-display-demo',
+  templateUrl: './inline-display.html'
+})
+export class InlineDisplayDemoComponent {
+  isCollapsed = false;
+}