title: Bootstrap selection disappears in select box after clicking. Only visible on mouse hover
body: <p>I have several select boxes on a page. The only problem is that after a value is selected, it becomes blank. I can only see it if I hover my mouse over the box. </p>
  
  <p>This is before clicking:</p>
  
  <p><a href="https://i.stack.imgur.com/uFHb3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uFHb3.png" alt="Before Clicking"></a></p>
  
  <p>This is after clicking the dropdown</p>
  
  <p><a href="https://i.stack.imgur.com/MneeN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MneeN.png" alt="After clicking dropdown"></a></p>
  
  <p>Here I have chosen 'Bachelors' and it's visible</p>
  
  <p><a href="https://i.stack.imgur.com/V0Iyy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V0Iyy.png" alt="After choosing"></a></p>
  
  <p>When I click away anywhere on the screen, it disappears!</p>
  
  <p><a href="https://i.stack.imgur.com/pkCth.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pkCth.png" alt="After clicking away it disappears"></a></p>
  
  <p>On mouse hover, it reappears!
  <a href="https://i.stack.imgur.com/7dUpZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7dUpZ.png" alt="Reappears on mouse hover"></a></p>
  
  <p>Here is my div for the select box:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;label class="col-md-4 control-label"&gt;Degree&lt;/label&gt;
              &lt;div class="col-md-4 selectContainer"&gt;
                  &lt;div class="input-group"&gt;
                      &lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-education"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;select name="degreeselect" class="form-control selectpicker"&gt;
                          &lt;option value=" " selected disabled&gt;Select Degree&lt;/option&gt;
                          &lt;option&gt;Bachelors&lt;/option&gt;
                          &lt;option&gt;Masters&lt;/option&gt;
                          &lt;option&gt;Doctorate&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I honestly don't know what is causing this. </p>