diff --git a/src/components/modal/README.md b/src/components/modal/README.md
index 22cea200113..609b3e21554 100644
--- a/src/components/modal/README.md
+++ b/src/components/modal/README.md
@@ -278,7 +278,44 @@ breakpoints to avoid horizontal scrollbars on narrower viewports. Valid optional
 
 The `size` prop maps the size to the `.modal-<size>` classes.
 
-## Vertically centering
+## Scrolling long content
+When modals become too long for the user’s viewport or device, they scroll independent of the
+page itself. Try the demo below to see what we mean.
+
+```html
+<div>
+  <b-button v-b-modal.modal-tall>Launch overflowing modal</b-button>
+
+  <b-modal id="modal-tall" title="Overflowing Content">
+    <p class="my-4" v-for="i in 20" :key="i">
+      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    </p>
+  </b-modal>
+</div>
+
+<!-- b-modal-scroll-overflow.vue -->
+```
+
+You can also create a scrollable modal that allows the scrolling of the modal body by setting
+the prop `scrollable` to `true`.
+
+```html
+<div>
+  <b-button v-b-modal.modal-scrollable>Launch scrolling modal</b-button>
+
+  <b-modal id="modal-scrollable" scrollable title="Scrollable Content">
+    <p class="my-4" v-for="i in 20" :key="i">
+      Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+      in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+    </p>
+  </b-modal>
+</div>
+
+<!-- b-modal-scrollable-content.vue -->
+```
+
+## Vertically centered modal
 
 Vertically center your modal in the viewport by setting the `centered` prop.
 
@@ -295,6 +332,8 @@ Vertically center your modal in the viewport by setting the `centered` prop.
 <!-- b-modal-center-vertically.vue -->
 ```
 
+Feel free to mix vertically `centered` with `scrollable`.
+
 ## Using the grid
 
 Utilize the Bootstrap grid system within a modal by nesting `<b-container fluid>` within the
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
index 42748655568..20667e1ca93 100644
--- a/src/components/modal/modal.js
+++ b/src/components/modal/modal.js
@@ -109,6 +109,10 @@ export default {
       type: Boolean,
       default: false
     },
+    scrollable: {
+      type: Boolean,
+      default: false
+    },
     buttonSize: {
       type: String,
       default: ''
@@ -294,7 +298,8 @@ export default {
       return [
         {
           [`modal-${this.size}`]: Boolean(this.size),
-          'modal-dialog-centered': this.centered
+          'modal-dialog-centered': this.centered,
+          'modal-dialog-scrollable': this.scrollable
         },
         this.dialogClass
       ]