title: How do I properly add custom CSS to a Bootstrap Modal
body: <p>I am writing an Extension for the Text-Editing software called Brackets, Brackets uses Bootstrap to style the Modal and CSS.
  I am trying to add custom CSS to the Modal so that I can reformat, move and resize different elements on the Modal such as the Checkboxes and dropdown menus to make it look cleaner.</p>
  
  <p>Everytime I attempt to add CSS to the Modal by either using  tags built in or a linked CSS the Modal doesn't load correctly.
  The modal loads and then the whole screen gets a opaque black film over it, and the Modal becomes un-useable. </p>
  
  <p>So I can deduct that I am not adding the CSS correctly as the Modal corrects the behavior when I remove the CSS I added.</p>
  
  <p>How do I add custom CSS styling to this Bootstrap Modal?</p>
  
  <pre><code>&lt;div id='templates_modal' class='template modal'&gt;
  &lt;div class='modal-header'&gt;
      &lt;button type='button' class='close' data-dismiss='modal'&gt;&lt;span aria-hidden='true'&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
      &lt;h1 class='dialog-title'&gt;{{TITLE_H1}}&lt;/h1&gt;
  &lt;/div&gt;
  &lt;p style='display: none; color: red; font-weight: bold;' id='templates_warning'&gt;{{DOCTYPE_ALERT}}&lt;/p&gt;
  &lt;p style='display: none; color: red; font-weight: bold;' id='templates_warning'&gt;{{CONTENT_ERROR}}&lt;/p&gt;
  &lt;p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'&gt;{{NO_FILE_OPEN_ERROR}}&lt;/p&gt;
  &lt;div class='modal-body'&gt;
      &lt;h4&gt;{{LANGUAGE_SELECTION}}&lt;/h4&gt;
      &lt;p&gt;{{LANGUAGE_DESCRIPTION}}&lt;/p&gt;
      &lt;select id='languages'&gt;
          &lt;option value=''&gt;{{SELECT_LABEL}}&lt;/option&gt;
          &lt;option value='english'&gt;en&lt;/option&gt;
          &lt;option value='german'&gt;de&lt;/option&gt;
          &lt;option value='spanish'&gt;es&lt;/option&gt;
          &lt;option value='french'&gt;fr&lt;/option&gt;
          &lt;option value='italian'&gt;it&lt;/option&gt;
          &lt;option value='chinese'&gt;zh-cn&lt;/option&gt;
      &lt;/select&gt;
      &lt;h4&gt;{{CHARSET_SELECTION}}&lt;/h4&gt;
      &lt;p&gt;{{CHARSET_DESCRIPTION}}&lt;/p&gt;
      &lt;select id="charset"&gt;
          &lt;option value=''&gt;{{SELECT_LABEL}}&lt;/option&gt;
          &lt;option value='utf8'&gt;UTF-8&lt;/option&gt;
          &lt;option value='utf16'&gt;UTF-16&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;h4&gt;{{TITLE_H4}}&lt;/h4&gt;
      &lt;select id="doctype"&gt;
          &lt;option value=''&gt;{{SELECT_LABEL}}&lt;/option&gt;
          &lt;option value='html5'&gt;HTML5&lt;/option&gt;
          &lt;option value='html4loose'&gt;HTML4 Transitional&lt;/option&gt;
          &lt;option value='html4strict'&gt;HTML4 Strict&lt;/option&gt;
          &lt;option value='xhtml1loose'&gt;XHTML 1 Trasitional&lt;/option&gt;
          &lt;option value='xhtml1strict'&gt;XHTML 1 Strict&lt;/option&gt;
          &lt;option value='xhtml11'&gt;XHTML 1.1&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;h4&gt;{{SECTION_TEMPLATES}}&lt;/h4&gt;
      &lt;p&gt;{{SECTION_TEMPLATES_DESC}}&lt;/p&gt;
      &lt;ul class="checkbox-grid" id="libraries"&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;' id="angularjs" value="angularjs" /&gt;&lt;label for="angularjs"&gt; Angular JS | 1.3.15&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"&gt;&lt;/script&gt;' id="angularmaterial" value="angularmaterial" /&gt;&lt;label for="angularmaterial"&gt; Angular Material | 0.10.0&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"&gt;&lt;/script&gt;' id="dojo" value="dojo" /&gt;&lt;label for="dojo"&gt; Dojo | 1.10.4&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"&gt;&lt;/script&gt;' id="extcore" value="extcore" /&gt;&lt;label for="extcore"&gt; Ext Core | 3.1.0&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;' id="jquery111" value="jquery111" /&gt;&lt;label for="jquery111"&gt; jQuery | 1.11.3&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;' id="jquery214" value="jquery214" /&gt;&lt;label for="jquery214"&gt; jQuery | 2.1.4&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"&gt;&lt;/script&gt;' id="jquerymobile" value="jquerymobile" /&gt;&lt;label for="jquerymobile"&gt; jQuery Mobile | 1.4.5&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;' id="jqueryui" value="jqueryui" /&gt;&lt;label for="jqueryui"&gt; jQUery UI | 1.11.4&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"&gt;&lt;/script&gt;' id="mootools" value="mootools" /&gt;&lt;label for="mootools"&gt; MooTools | 1.5.1&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"&gt;&lt;/script&gt;'  id="prototype"value="prototype" /&gt;&lt;label for="prototype"&gt; Prototype | 1.7.2.0&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"&gt;&lt;/script&gt;' id="script_aculo_us" value="script_aculo_us" /&gt;&lt;label for="script_aculo_us"&gt; script.aculo.us | 1.9.0 (Requires Prototype)&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"&gt;&lt;/script&gt;' id="spf" value="spf" /&gt;&lt;label for="spf"&gt; SPF | 2.2.0&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"&gt;&lt;/script&gt;' id="swfobject" value="swfobject" /&gt;&lt;label for="swfobject"&gt; SWFObject | 2.2&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"&gt;&lt;/script&gt;' id="threejs" value="threejs" /&gt;&lt;label for="threejs"&gt; three.js | r69&lt;/label&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" name="lib_checkboxes" data-script='&lt;script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"&gt;&lt;/script&gt;' id="webfontloader" value="webfontloader" /&gt;&lt;label for="webfontloader"&gt; Web Font Loader | 1.5.18&lt;/label&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class='modal-footer'&gt;
          &lt;a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'&gt;{{GENERATE_BUTTON}}&lt;/a&gt;
          &lt;a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'&gt;{{CANCEL_BUTTON}}&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>