Why class modal-side modal-top-right not working on modal bootstrap?

Question

My code like this :

<div class="modal fade right" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog modal-side modal-bottom-right">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Demo and full code : https://codepen.io/trendingnews/pen/yLyVpOK

I had add class modal-side modal-bottom-right, but it does not works. When the modal opened, it does not on the bottom right

I get reference from here : https://mdbootstrap.com/docs/jquery/modals/basic/ to put class modal-side modal-bottom-right How can I solve this problem?

Answer 1

The reference you're linking to is for material-design bootstrap . Not twitter-bootstrap . md-boostrap extends the functionality of twitter-bootstrap to use the material-design style guide . You'll need to link both the md-bootstrap CSS and md-boostrap Javascript in addition to jQuery and bootstrap's CSS, JS:

Javascript CDN:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>

And the CSS CDN:

<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">

Here is a working example.