title: Having an issue in Bootstrap with opacity of divs and buttons
body: <p>I am trying to make a div with opacity and include a button. I cannot figure out why the button is getting the opacity as well as the div. But the text is fine. I want the button to have no opacity</p>
  
  <p>CSS</p>
  
  <pre><code>.jumbotron {
    background-image: url('../images/parkbanner.jpg');
    background-size: cover;
    color: #000;
    padding: 150px 25px;
    font-family: Montserrat, sans-serif;
   }
   .container-fluid {
    padding: 60px 50px;
   }
  
  .phone {
    margin: 5px;
    margin-left: 50px;
    background-color: #ffffff;
    opacity: 0.8;
    filter: alpha(opacity=60); /* For IE8 and earlier */
    border-radius: 25px;
    padding: 20px; 
    width: 300px;
    height: 175px; 
   }
  .phone p{
    font-weight: bold;
    color: black;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="jumbotron text-center"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-4 text-center"&gt;&lt;/div&gt;    
      &lt;div class="col-md-4 col-center"&gt;
      &lt;div class="phone"&gt;
          &lt;p&gt;Please Don't Wait Until&lt;br /&gt; It's Too Late &lt;/p&gt;
              &lt;button type="button" class="btn btn-success btn-lg"&gt;
                  &lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt;  1-888-496-8059
              &lt;/button&gt;
          &lt;/div&gt;  
          &lt;/div&gt;
      &lt;div class="col-md-4 text-center"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>[<img src="https://i.stack.imgur.com/kpihV.png" alt="Opacity Button Issue[1]"></p>