title: NgbModal - Custom Class Styling
body: <p>I have an Angular 6 app that I am trying to implement a modal window that slides in from the right side of the screen, like shown here: <a href="https://codepen.io/anon/pen/OayRVy" rel="noreferrer">https://codepen.io/anon/pen/OayRVy</a></p>
  
  <p>But, no matter what I try, I cannot override the positioning of the modal window. The only thing I have been able to change is things like the background color of the header/body. </p>
  
  <p>My modal HTML:</p>
  
  <pre><code>&lt;ng-template #content let-modal="close"&gt;
  
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title" id="modal-basic-title"&gt;Table of Contents&lt;/h4&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="dismissModal(modal)"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-body"&gt;
          &lt;p&gt;
            ....
          &lt;/p&gt;
        &lt;/div&gt;
  
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>Component code:</p>
  
  <pre><code>  import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
  
    constructor(private modalService: NgbModal) {}
  
    public open(content) {
      this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', size: 'lg'}).result.then((result) =&gt; {
        ...
      }, (reason) =&gt; {
        ...
      });
    }
  </code></pre>
  
  <p>If I inspect the HTML and in Chrome DevTools add a <code>float: right</code> property to the <code>.modal-dialog</code> container, it will do what I want. But, adding a </p>
  
  <pre><code>.modal-dialog {
    float: right;
  }
  </code></pre>
  
  <p>to my .scss file for the component has no effect. </p>
  
  <p>Can anyone show me how to override the default bootstrap styling so I can force it to appear on the right side of the screen and take up 100% of the height?  </p>