title: How to change css style of a Bootstrap 3 modal?
body: <p>I cannot change the style of Bootstrap 3 modals.</p>
  
  <p>I tried this in my css file:</p>
  
  <pre><code>.modal .modal-dialog { 
      width: 150px; 
      background-color: blue;
  }
  </code></pre>
  
  <p>But I got no results.</p>
  
  <p>Why it don't works? And how could I change the Bootstrap 3 modal?</p>
  
  <p>Here is may head tag:</p>
  
  <pre><code> &lt;head&gt;
      &lt;meta http-equiv="Content-Language" content="pt-br"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt; 
      &lt;!--&lt;meta name="csrf-token" content=""&gt;--&gt;
  
      &lt;title&gt;Home&lt;/title&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- jQueryUI --&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;  
  
  
  
  
      &lt;!-- Bootstrap --&gt;
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /&gt;
      &lt;!-- Optional theme --&gt;
      &lt;!-- &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" /&gt;--&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- React --&gt;
      &lt;script src="js/react/build/react.js"&gt;&lt;/script&gt;
      &lt;script src="js/react/build/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Font Awesome --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"&gt;
  
      &lt;!-- App Styles --&gt;
      &lt;link rel="stylesheet" href="/css/styles.css" /&gt;
  
      &lt;!-- jQueryMask --&gt;
      &lt;script src="js/jquery.mask.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
  </code></pre>
  
  <p>Update: I can do it via inline style. It's ugly, but works!</p>