Vue Bootstrap Modal

Vue Modal - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.

Basic example

Below is the most basic Modal example with a button triggering Modal. Click the button to trigger Modal.

<template>
  <div>
    <mdb-btn color="primary" @click.native="modal = true">Launch demo modal</mdb-btn>
    <mdb-modal :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Position and size

To change the position or size of the modal add one of the following props to the modal component.

Central modal

Note: Medium size is a default value, so there isn't a dedicated prop for it.

size="sm" Small Modal

size="lg" Large Modal

size="fluid" Full Width Modal

Code example: 

<template>
  <div>
    <mdb-btn color="primary" @click.native="modal = true">Small modal</mdb-btn>
    <mdb-modal size="sm" :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" size="sm" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary" size="sm">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Side modal

Note: To make it works properly, apart from adding a prop for a position, you also need to add special side prop to the modal component.

side + position="top-right" Top Right

side + position="top-left" Top Left

side + position="bottom-right" Bottom Right

side + position="bottom-left" Bottom Left

Code example: 

<template>
  <div>
    <!-- Side Modal Top Right -->
    <mdb-btn color="primary" @click.native="modal = true">Top right</mdb-btn>
    <mdb-modal side position="top-right" direction="right" :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Fluid modal

Note: As in the previous example - to make it works properly, apart from adding a prop for a position, you also need to add special prop fullHeight to modal component.

fullHeight + position="right" Right

fullHeight + position="left" Left

fullHeight + position="bottom" Bottom

fullHeight + position="top" Top

Code example: 

<template>
  <div>
    <!-- Side Modal Top Right -->
    <mdb-btn color="primary" @click.native="modal = true">Full height right</mdb-btn>
    <mdb-modal side position="right" fullHeight direction="right" :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Frame modal

Note: As in the previous examples - to make it works properly, apart from adding a prop for a position, you also need to add special prop frame to modal component.

frame + position="bottom" Bottom

frame + position="top" Top

Code example: 

<template>
  <div>
    <!-- Frame Modal Bottom -->
    <mdb-btn color="primary" @click.native="modal = true">Bottom</mdb-btn>
    <mdb-modal frame position="bottom" direction="bottom" :show="modal" @close="modal = false">
      <mdb-modal-body class="text-center">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-body>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalBody,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalBody,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Remove backdrop

To remove backdrop add removeBackdrop prop to the modal component

<template>
  <div>
    <mdb-btn color="primary" @click.native="modal = true">Launch modal</mdb-btn>
    <mdb-modal removeBackdrop side position="top-right" :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>...</mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </div>
</template>
<script>
  import {
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbBtn
  } from 'mdbvue';
  export default {
    components: {
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbBtn
    },
    data() {
      return {
        modal: false
      };
    }
  };
</script>

Scrolling long content

When modal become too long for the user’s viewport or device, it scrolls independently of the page itself. Try the demo below.

You can also create a scrollable modal that allows scroll the modal body by adding scrollable property.

<template>
  <mdb-container>
    <mdb-btn color="primary" @click.native="showModal = true">Launch modal</mdb-btn>
    <mdb-modal :show="showModal" @close="showModal = false" scrollable>
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>
        <p>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>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
          laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>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>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
          laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>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>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
          laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>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>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
          laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>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>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue
          laoreet rutrum faucibus dolor auctor.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
          consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
      </mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="showModal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </mdb-container>
</template>
<script>
  import {
    mdbBtn,
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbContainer
  } from 'mdbvue';
  export default {
    name: 'ModalPage',
    data() {
      return {
        showModal: false,
      };
    },
    components: {
      mdbBtn,
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbContainer
    }
  };
</script>

Vertically centered

Add centered prop to modal to vertically center the modal.

Tooltips and popovers

Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

Note: Remember to initialize tooltips/popovers. You can find more information in the Tooltips and popovers documentation.

<template>
  <mdb-container class="mt-5">
    <mdb-btn color="primary" @click.native="modal = true">Launch modal</mdb-btn>
    <mdb-modal :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>
        <mdb-modal-title>Popover in modal</mdb-modal-title>
        <div>This
          <mdb-popover trigger="click" :options="{placement: 'right'}">
            <div class="popover">
              <div class="popover-header">
                Popover title
              </div>
              <div class="popover-body">
                Popover body content is set in this attribute.
              </div>
            </div>
            <mdb-btn slot="reference" color="default">
              Button
            </mdb-btn>
          </mdb-popover>
          triggers a popover on click.
        </div>
        <hr />
        <mdb-modal-title>Tooltips in a modal</mdb-modal-title>
        <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
          <div class="tooltip">
            Tooltip
          </div>
          <a slot="reference">
              This link
          </a>
        </mdb-tooltip>
        and
        <mdb-tooltip trigger="hover" :options="{placement: 'top'}">
          <div class="tooltip">
            Tooltip
          </div>
          <a slot="reference">
              that link
          </a>
        </mdb-tooltip>
        have tooltips on hover.
      </mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </mdb-container>
</template>
<script>
  import {
    mdbBtn,
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbTooltip,
    mdbPopover,
    mdbInput,
    mdbTextarea,
    mdbContainer,
    mdbRow,
    mdbCol
  } from 'mdbvue';
  export default {
    name: 'ModalPage',
    data() {
      return {
        modal: false
      };
    },
    components: {
      mdbBtn,
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbTooltip,
      mdbPopover,
      mdbInput,
      mdbTextarea,
      mdbContainer,
      mdbRow,
      mdbCol
    }
  };
</script>

Using the grid

Utilize the Bootstrap grid system within a modal by nesting container fluid within the modal-body. Then, use the normal grid system classes as you would anywhere else.

<template>
  <mdb-container class="mt-5">
    <mdb-btn color="primary" @click.native="modal = true">Launch modal</mdb-btn>
    <mdb-modal :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>Modal title</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>
        <mdb-container fluid class="text-white">
          <mdb-row>
            <mdb-col md="4" class="bg-info">.col-md-4</mdb-col>
            <mdb-col md="4" class="ml-auto bg-info">.col-md-4 .ml-auto</mdb-col>
          </mdb-row>
          <br />
          <mdb-row>
            <mdb-col md="3" class="ml-auto bg-info">.col-md-3 .ml-auto</mdb-col>
            <mdb-col md="2" class="ml-auto bg-info">.col-md-2 .ml-auto</mdb-col>
          </mdb-row>
          <mdb-row>
            <mdb-col md="6" class="ml-5 bg-info">.col-md-6 .ml-5</mdb-col>
          </mdb-row>
          <br />
          <mdb-row>
            <mdb-col sm="9" class="bg-info">
              Level 1: .col-sm-9
              <mdb-row>
                <mdb-col sm="6" class="bg-info">
                  Level 2: .col-8 .col-sm-6
                </mdb-col>
                <mdb-col sm="6" class="bg-info">
                  Level 2: .col-4 .col-sm-6
                </mdb-col>
              </mdb-row>
            </mdb-col>
          </mdb-row>
        </mdb-container>
      </mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Save changes</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </mdb-container>
</template>
<script>
  import {
    mdbBtn,
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbTooltip,
    mdbPopover,
    mdbInput,
    mdbTextarea,
    mdbContainer,
    mdbRow,
    mdbCol
  } from 'mdbvue';
  export default {
    name: 'ModalPage',
    data() {
      return {
        modal: false
      };
    },
    components: {
      mdbBtn,
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbTooltip,
      mdbPopover,
      mdbInput,
      mdbTextarea,
      mdbContainer,
      mdbRow,
      mdbCol
    }
  };
</script>

Varying modal content 

<template>
  <mdb-container class="mt-5">
    <mdb-btn color="primary" @click.native="modal = true">Open modal for {{mailAddress}}</mdb-btn>
    <mdb-modal :show="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title>New message to {{mailAddress}}</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>
        <mdb-input type="text" :label="mailAddress" />
        <mdb-textarea label="Message" />
      </mdb-modal-body>
      <mdb-modal-footer>
        <mdb-btn color="secondary" @click.native="modal = false">Close</mdb-btn>
        <mdb-btn color="primary">Send message</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
  </mdb-container>
</template>
<script>
  import {
    mdbBtn,
    mdbModal,
    mdbModalHeader,
    mdbModalTitle,
    mdbModalBody,
    mdbModalFooter,
    mdbTooltip,
    mdbPopover,
    mdbInput,
    mdbTextarea,
    mdbContainer,
    mdbRow,
    mdbCol
  } from 'mdbvue';
  export default {
    name: 'ModalPage',
    data() {
      return {
        modal: false,
        mailAddress: '@mdo'
      };
    },
    components: {
      mdbBtn,
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter,
      mdbTooltip,
      mdbPopover,
      mdbInput,
      mdbTextarea,
      mdbContainer,
      mdbRow,
      mdbCol
    }
  };
</script>

Vue Modal - API

In this section you will find advanced information about the Modal component. Which modules are required? What are the customization possibilities of modals? Finally - what events and methods can be used within?

Modal components import statement

In order to use the component make sure you have imported it properly.

<script>
  import {
    Modal,
    ModalBody,
    ModalHeader,
    ModalFooter
  } from 'mdbvue';
</script>

Modal

The table below shows the configuration option props of the Modal component.

Name Type Default Description
tag String div Allows to substitute native element's tag
show Boolean true Makes modal visible
side Boolean false Makes modal a side-positioned one
position String -- Determinates modal's position relative to the browser window
centered Boolean -- Center modal vertically and horizonally
fullHeight Boolean false Makes the modal take full height from a specified side
frame Boolean false Turns modal into a frame-type one
removeBackdrop Boolean false Removes the dark overlay from the background, along its functionality
cascade Boolean false Allows for a cascading nature of a modal
avatar Boolean false Gives modal styling fitting perfectly with avatar-based heading
tabs Boolean false Provides styles necessary for having a tab navigation in modal's header
success Boolean false Styles modal in a success-notification fashion
info Boolean false Styles modal in a info-notification fashion
warning Boolean false Styles modal in a warning-notification fashion
warning Boolean false Styles modal in a warning-notification fashion
elegant Boolean false It helps to style modal so it is slick and elegant
dark Boolean false Determines whether style of a modal should not have a dark nature
bgSrc String null Dark style necessitate having a picture background, but the feature is for all the modals, really
scrollable Boolean false Allows to scroll through long contents with a scrollbar
direction String "top" Allows to change a transition's direction.

ModalHeader

Name Type Default Description
tag String div Allows to substitute native element's tag
close Boolean true Turning it to false gets rid of the close "x" icon in the right top conrner
color String -- Determines color of the header
textColor String -- Helps to set font color

ModalBody

Name Type Default
tag String div Allows to substitute native element's tag
Name Type Default Description
tag String div Allows to substitute native element's tag
start Boolean false Makes the ModalHeader contents align to the left
end Boolean false Makes the ModalHeader contents align to the right
closeAriaLabel Boolean false Makes the ModalHeader contents align with space between them
titleClasses Boolean false Makes the ModalHeader contents align with space around them