Vue Modal styles

Vue Bootstrap Modal styles

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.

See also: Vue Modal Core Documentation, Vue Modal Forms and Vue Modal Templates.


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:

  1. mdbModalHeader component thanks to its .modal-header class

  2. mdbBadge and all the other elements with the .badge class

  3. large (size="4x") mdbIcon components within the modal

Success modal

Simply add success prop to a mdbModal component.


        <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.


            <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.jpg" 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.


            <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.


            <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).jpg" 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>
          

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.


            import { mdbModal, mdbModalBody, mdbModalHeader, mdbModalFooter } from 'mdbvue';
        

Modal Styles

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.

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

The change shall effect the following components within the modal:

  1. mdbModalHeader

  2. mdbBadge

  3. 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!