title: How can I change the background color of Bootstrap modal?
body: <p>As the title suggests I want to change the color of the actual modal, not the shaded area behind the modal. As this <a href="https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal">post</a> says. I just want to change the color of the modal. Heres some code:</p>
  
  <pre><code>&lt;div class="portfolio-modal modal fade" id="HighSchoolModal" tabindex="-1" role="dialog" aria-hidden="true" style="background-color:#F07A1A !important;"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="close-modal" data-dismiss="modal"&gt;
                  &lt;div class="lr"&gt;
                      &lt;div class="rl"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                          &lt;div class="modal-body"&gt;
                              &lt;h2&gt;Parktown Boys' High&lt;/h2&gt;
                              &lt;hr class="star-primary"&gt;
                              &lt;img src="img/portfolio/park.jpg" class="img-responsive img-centered" style="width:50%" alt=""&gt;
                              &lt;p&gt;Use this area of the page to describe your project. The icon above is part of a free icon set by &lt;a href="https://sellfy.com/p/8Q9P/jV3VZ/"&gt;Flat Icons&lt;/a&gt;. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!&lt;/p&gt;
                              &lt;ul class="list-inline item-details"&gt;
                                  &lt;li&gt;Client: &lt;strong&gt;&lt;a href="http://startbootstrap.com"&gt;Start Bootstrap&lt;/a&gt;&lt;/strong&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;Date: &lt;strong&gt;&lt;a href="http://startbootstrap.com"&gt;April 2014&lt;/a&gt;&lt;/strong&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;Service: &lt;strong&gt;&lt;a href="http://startbootstrap.com"&gt;Web Development&lt;/a&gt;&lt;/strong&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt; Close&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I've used <code>style="background-color:#F07A1A !important;"</code> on the code and in the chrome element inspector it shows the color is in being applied:</p>
  
  <p><img src="https://i.stack.imgur.com/puqmr.png" alt="enter image description here"></p>
  
  <p>The problem... my modal is still white. Any ideas how I can change the background color?</p>