title: Angular UI Modal CSS
body: <p>I'm using the Angular UI modal and would like to make it smaller.  According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:</p>
  
  <pre><code>&lt;div class="modal-dialog modal-sm"&gt;
  </code></pre>
  
  <p>I'm having trouble incorporating this div into my Angular modal template.  Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template.  Are the outer modal, modal-dialog, and modal-content divs already provided by Angular?  If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div?  I tried adding the full modal div structure to the template and it caused problems with my modal.  I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either.  Any ideas?  Thanks.</p>
  
  <p><strong>Update:</strong> here is the content of my modal template after I tried to include the outer Bootstrap div's.  It is a very simple modal to confirm the user wants to delete an item.</p>
  
  <pre><code>&lt;div class="modal"&gt;
      &lt;div class="modal-dialog modal-sm"&gt;
          &lt;div class="modal-content"&gt;
             &lt;div class="modal-header"&gt;
                  &lt;h4&gt;Confirm Delete&lt;/h4&gt;
             &lt;/div&gt;
             &lt;div class="modal-body"&gt;
                 &lt;p&gt;Are you sure you want to delete?&lt;/p&gt;
             &lt;/div&gt;
             &lt;div class="modal-footer"&gt;
                 &lt;button class="btn btn-primary" ng-click="confirm()"&gt;Confirm&lt;/button&gt;
                 &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The result is it doesn't show my modal correctly.  I can see the backdrop and a very tiny sliver of what I assume to be my modal.</p>
  
  <p><strong>Update:</strong> Using @lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the @modal-sm Less variable.</p>
  
  <pre><code>.confirm-modal .modal-dialog {
      width: @modal-sm;
  }
  </code></pre>