title: Why is the close button (X) not rendering correctly in my modal?
body: <p>This is what I'm getting:</p>
  
  <p><img src="https://i.stack.imgur.com/fucPu.png" alt="enter image description here"></p>
  
  <p>I'd like the close button in the top right corner to be an X, which I believe it should be by default anyway. Keep in mind the modal works perfectly, and when I click on the close button (A~-) it works as intended. I've tried running it on IE, Chrome and Firefox, and in all the cases the problem persists.</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <pre><code>&lt;div id="group" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="groupLabel"
       aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="groupLabel"&gt;Add group&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div ng-controller="Ctrl"&gt;
          &lt;form ng-submit="addGroup(newGroup, newColor); newGroup='';"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span3 offset3"&gt;
                          Group name
                      &lt;/div&gt;
                      &lt;div class="span6"&gt;
                          &lt;input class="input-block-level" type="text" ng-model="newGroup"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span3 offset3"&gt;
                          Group color
                      &lt;/div&gt;
                      &lt;div class="span6"&gt;
                          &lt;select ng-model="newColor" class="input-block-level"&gt;
                              &lt;option value=""&gt;None&lt;/option&gt;
                              &lt;option value="red"&gt;Red&lt;/option&gt;
                              &lt;option value="blue"&gt;Blue&lt;/option&gt;
                              &lt;option value="green"&gt;Green&lt;/option&gt;
                              &lt;option value="orange"&gt;Orange&lt;/option&gt;
                              &lt;option value="cyan"&gt;Cyan&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
                  &lt;input class="btn btn-primary" type="submit" value="Save changes"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the line of interest:</p>
  
  <pre><code>&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
  </code></pre>
  
  <p>These are my includes:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/angular.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/controller.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/ui-bootstrap.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/angular-ui-if.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="css/bootstrap/css/bootstrap.css"&gt;
  </code></pre>