<div class="container mt-5">

​

  <!-- Button trigger modal -->

  <button

    type="button"

    class="btn btn-primary"

    data-mdb-toggle="modal"

    data-mdb-target="#exampleModal"

  >

    Launch demo modal

  </button>

​

  <!-- Modal -->

  <div

    class="modal fade"

    id="exampleModal"

    tabindex="-1"

    aria-labelledby="exampleModalLabel"

    aria-hidden="true"

  >

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

          <button

            type="button"

            class="btn-close"

            data-mdb-dismiss="modal"

            aria-label="Close"

          ></button>

        </div>

        <div class="modal-body">

            <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg">

              <br/>

              <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" class="img-fluid"></p>

              <h1 style="text-align: center;">MDBootstrap</h1>

              <p style="text-align: center;">WYSIWYG Editor</p>

              <p style="text-align: center;"><a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a>&nbsp;© 2020</p>

              <p style="text-align: left;"><b>Features:</b></p>

              <ul>

                <li>Changing block type</li>

                <li>Text formatting (bold, italic, strikethrough, underline)</li>

                <li>Setting text color</li>

                <li>Setting color highlight</li>

                <li>Text aligning</li>

                <li>Creating a list (bulled or numbered)</li>

                <li>Increase/Decrease indent</li>

                <li>Inserting links</li>

                <li>Inserting pictures</li>

                <li>Insert horizontal line</li>

                <li>show HTML code</li>

                <li>Undo/Redo</li>

              </ul>

              <p><b>Options:</b></p>

              <ul>

                <li>Translations</li>

                <li>Using your own color palette</li>

                <li>Disabling/enabling sections</li>

              </ul>

              <p><b>Methods:</b></p>

              <ul>

                <li>Get HTML code from editor</li>

              </ul>

            </div>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">

            Close

          </button>

          <button type="button" class="btn btn-primary">Save changes</button>

        </div>

      </div>

    </div>

  </div>

</div>