modal-lg not working with modal-bottom-right

I want a modal in the bottom right corner. I've found that I can only get the modal to be 'sm' (modal-sm) or 'md' (modal-md, which is the default). When I use 'modal-lg', it still shows as 'modal-md', even though I can see 'modal-lg' in the DOM using browser development tools. If I remove 'modal-side modal-bottom-right', then the modal shows up 'lg' but towards the top of the page, which is not what I want. I've pasted the html code below. What am I doing wrong? <!-- code -->     <div class="modal fade right" id="notifyModal" tabindex="-1" role="dialog" aria-hidden="true">      <div class="modal-dialog modal-lg modal-side modal-bottom-right modal-notify modal-info" role="document">      <div class="modal-content">      <div class="modal-header">      <h5 class="modal-title">TITLE</h5>      </div>      <div class="modal-body">             Here is some content ...      </div>      <div class="modal-footer modal-justify-center">      <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>      </div>      </div>      </div>     </div>     <!-- end of code -->

---