title: Changing color of bootstrap button
body: <p>This is a stupid question, because I feel I should know the answer and thought my code would have done the job.</p>
  
  <p>But I'm using bootstrap and I'm attempting to change the btn btn-primary class from the default blue to something else.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;input type="text" class="form-control" placeholder="Search by user name, member type, genre..."&gt;
                           &lt;span class="input-group-btn"&gt;
                               &lt;button class="btn btn-primary" type="button"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
                           &lt;/span&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>.btn btn-primary:hover,
  .btn btn-primary:focus,
  .btn btn-primary:active,
  .btn btn-primary.active {
    color: #ffffff;
    background-color: pink;
    border-color: pink;
  }
  </code></pre>
  
  <p>But it still looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/b0h4R.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/b0h4R.jpg" alt="enter image description here"></a></p>