Vue Modal styles

Vue Bootstrap Modal styles

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

By using our predefined modal styles you can add some emotional weight to your information, ranging from a simple warning to critical system failure or from an operation success to a neutral information.

Launch Modal Success

Launch Modal Info

Launch Modal Danger

Launch Modal Warning

Basic usage - styles

Modal style props will help you with general look of your modal in terms of its contents and function.

It only requires adding one of the following props: success, info, warning or danger.

Doing so will style these elements:

mdbModalHeader component thanks to its .modal-header class
mdbBadge and all the other elements with the .badge class
large (size="4x") mdbIcon components within the modal

Success modal

Simply add success prop to a mdbModal component.

Show code

template
script

        
            
      <template>
        <div>
          <!-- trigger modal button -->
          <mdb-btn rounded color="default" @click.native="success = true">launch success modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <!-- Central Modal Medium Success -->
          <mdb-modal :show="success" @close="success = false" success>
            <!--Header-->
            <mdb-modal-header>
              <mdb-modal-title>Success Modal</mdb-modal-title>
            </mdb-modal-header>
            <!--Body-->
            <mdb-modal-body class="text-center">
              <mdb-icon icon="check" size="4x" class="mb-3 animated rotateIn" />
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iusto nulla
                aperiam blanditiis ad consequatur in dolores culpa, dignissimos, eius non possimus fugiat.
                Esse ratione fuga, enim, ab officiis totam.
              </p>
            </mdb-modal-body>
            <!--Footer-->
            <mdb-modal-footer center>
              <mdb-btn color="success" @click.native="success = false">Get it now
                <mdb-icon icon="diamond" class="ml-1" color="white" />
              </mdb-btn>
              <mdb-btn outline="success" @click.native="success = false">No, thanks</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBtn,
          mdbIcon,
          mdbModal,
          mdbModalHeader,
          mdbModalTitle,
          mdbModalBody,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalStylesPage',
          components: {
            mdbBtn,
            mdbIcon,
            mdbModal,
            mdbModalHeader,
            mdbModalTitle,
            mdbModalBody,
            mdbModalFooter,
          },
          data() {
            return {
              success: false,
            }
          }
        }
      </script>

Info modal

Add info prop to a mdbModal.

Show code

template
script

        
            
      <template>
        <div>
          <!-- trigger modal button -->
          <mdb-btn rounded color="default" @click.native="info = true">launch info modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <!-- Central Modal Medium Success -->
          <mdb-modal :show="info" @close="info = false" info>
            <!--Header-->
            <mdb-modal-header>
              <mdb-modal-title>Info Modal</mdb-modal-title>
            </mdb-modal-header>
            <!--Body-->
            <mdb-modal-body>
              <img src="https://mdbootstrap.com/wp-content/uploads/2016/11/admin-dashboard-bootstrap.webp" alt="modal"
                class="img-fluid" />
              <p class="text-center">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt vero illo error eveniet cum.
              </p>
            </mdb-modal-body>
            <!--Footer-->
            <mdb-modal-footer center>
              <mdb-btn color="primary" @click.native="info = false">Get it now
                <mdb-icon icon="diamond" class="ml-1" color="white" />
              </mdb-btn>
              <mdb-btn outline="primary" @click.native="info = false">No, thanks</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBtn,
          mdbIcon,
          mdbModal,
          mdbModalHeader,
          mdbModalTitle,
          mdbModalBody,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalStylesPage',
          components: {
            mdbBtn,
            mdbIcon,
            mdbModal,
            mdbModalHeader,
            mdbModalTitle,
            mdbModalBody,
            mdbModalFooter,
          },
          data() {
            return {
              info: false,
            };
          }
        }
      </script>

Danger modal

Add danger prop to a mdbModal.

Show code

template
script

        
            
      <template>
        <div>
          <!-- trigger modal button -->
          <mdb-btn rounded color="default" @click.native="danger = true">launch danger modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <!-- Central Modal Medium Success -->
          <mdb-modal :show="danger" @close="danger = false" danger>
            <!--Header-->
            <mdb-modal-header>
              <mdb-modal-title>Danger Modal</mdb-modal-title>
            </mdb-modal-header>
            <!--Body-->
            <mdb-modal-body>
              <mdb-row>
                <mdb-col col="3" class="text-center">
                  <mdb-icon icon="shopping-cart" size="4x" />
                </mdb-col>
                <mdb-col col="9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt
                    earum.</p>
                  <h2>
                    <mdb-badge>v52gs1</mdb-badge>
                  </h2>
                </mdb-col>
              </mdb-row>
            </mdb-modal-body>
            <!--Footer-->
            <mdb-modal-footer center>
              <mdb-btn color="danger" @click.native="danger = false">Get it now
                <mdb-icon icon="diamond" class="ml-1" color="white" />
              </mdb-btn>
              <mdb-btn outline="danger" @click.native="danger = false">No, thanks</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBtn,
          mdbIcon,
          mdbModal,
          mdbModalHeader,
          mdbModalTitle,
          mdbModalBody,
          mdbRow,
          mdbCol,
          mdbBadge,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalStylesPage',
          components: {
            mdbBtn,
            mdbIcon,
            mdbModal,
            mdbModalHeader,
            mdbModalTitle,
            mdbModalBody,
            mdbRow,
            mdbCol,
            mdbBadge,
            mdbModalFooter,
          },
          data() {
            return {
              danger: false
            };
          }
        }
      </script>

Warning modal

Add warning prop to a mdbModal.

Show code

template
script

        
            
      <template>
        <div>
          <!-- trigger modal button -->
          <mdb-btn rounded color="default" @click.native="warning = true">launch warning modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <!-- Central Modal Medium Success -->
          <mdb-modal :show="warning" @close="warning = false" warning>
            <!--Header-->
            <mdb-modal-header>
              <mdb-modal-title>Warning Modal</mdb-modal-title>
            </mdb-modal-header>
            <!--Body-->
            <mdb-modal-body>
              <mdb-row>
                <mdb-col col="3" class="text-center">
                  <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp" alt="Jane, Consultant"
                    class="img-fluid z-depth-1-half rounded-circle mb-2">
                  <p class="title mb-0">Jane</p>
                  <p class="text-muted " style="font-size: 13px">Consultant</p>
                </mdb-col>
                <mdb-col col="9">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, molestiae provident temporibus sunt
                    earum.</p>
                  <p class="card-text"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></p>
                </mdb-col>
              </mdb-row>
            </mdb-modal-body>
            <!--Footer-->
            <mdb-modal-footer center>
              <mdb-btn color="warning" @click.native="warning = false">Get it now
                <mdb-icon icon="diamond" class="ml-1" color="white" />
              </mdb-btn>
              <mdb-btn outline="warning" @click.native="warning = false">No, thanks</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </div>
      </template>

        
            
      <script>
        import {
          mdbBtn,
          mdbIcon,
          mdbModal,
          mdbModalHeader,
          mdbModalTitle,
          mdbModalBody,
          mdbRow,
          mdbCol,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalStylesPage',
          components: {
            mdbBtn,
            mdbIcon,
            mdbModal,
            mdbModalHeader,
            mdbModalTitle,
            mdbModalBody,
            mdbRow,
            mdbCol,
            mdbModalFooter,
          },
          data() {
            return {
              warning: false,
            };
          }
        }
      </script>

Introduction
Basic usage - styles

Vue Modal styles - API

In this section with short summary of props available when it comes to general modal styling.

Modal components import statement

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

Show code

script

        
            
      <script>
        import {
          mdbModal,
          mdbModalBody,
          mdbModalHeader,
          mdbModalFooter
        } from 'mdbvue';
      </script>

Modal Styles

All it takes is adding a success, info, warning or a danger prop!

The change shall effect the following components within the modal:

mdbModalHeader
mdbBadge
mdnIcon

Name	Type	Default	Description
`success`	Boolean	`false`	Makes a modal express feelings of accomplishment, achievement, and relief
`info`	Boolean	`false`	Suddenly, modal asks for focus, promising important news
`warning`	Boolean	`false`	Makes the modal suggest there might be something wrong with your order, disc space or upload
`danger`	Boolean	`false`	That's the final draw - modal becomes the Bringer of Bad News. Careful beyond that line!