title: Styling bootstrap modal in Angular 5
body: <p>I am currently trying to style a bootstrap 4 Modal window within Angular 5.</p>
  
  <p>I have the scss imported into my global.scss and I am giving the modal window the customClass as followed.</p>
  
  <pre><code>this.modalService.open(content, { windowClass: 'tutorial'});
  </code></pre>
  
  <p>So far so good the popup shows up, in the bottom left corner. But what I want to achieve is a bottom modal like in this case.</p>
  
  <p><a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom</a></p>
  
  <p>but whatever I do I cannot seem to get it working.</p>
  
  <p>I just don't seem to be able to stretch the modal all the way. This is my current scss </p>
  
  <pre><code>    .tutorial {
      position: fixed;
      top: auto;
      bottom: 0px;
      width: 100%;
  
      .modal-dialog{
          margin: 0;
          }
      }
  </code></pre>
  
  <p>I assumed width: 100% would be fine but somehow it doesn't work. 
  Any ideas?</p>