title: Changing pagination colour Bootstrap
body: <p>Here is my pagination control:</p>
  
  <p><a href="https://i.stack.imgur.com/iVufm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iVufm.png" alt="enter image description here"></a></p>
  
  <p>I am trying to make the labels of the pagination purple, so far I have been unable to override it. Here is my CSS:</p>
  
  <pre><code>/* pagination */
  
  .pagination {
      height: 36px;
      margin: 18px 0;
      color: #6c58bF;
  }
  
  .pagination ul {
      display: inline-block;
      *display: inline;
      /* IE7 inline-block hack */
      *zoom: 1;
      margin-left: 0;
      color: #ffffff;
      margin-bottom: 0;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .pagination li {
      display: inline;
      color: #6c58bF;
  }
  
  .pagination a {
      float: left;
      padding: 0 14px;
      line-height: 34px;
      color: #6c58bF;
      text-decoration: none;
      border: 1px solid #ddd;
      border-left-width: 0;
  }
  
  .pagination a:hover,
  .pagination .active a {
      background-color: #6c58bF;
      color: #ffffff;
  }
  
  .pagination a:focus {
      background-color: #6c58bF;
      color: #ffffff;
  }
  
  
  .pagination .active a {
      color: #ffffff;
      cursor: default;
  }
  
  .pagination .disabled span,
  .pagination .disabled a,
  .pagination .disabled a:hover {
      color: #999999;
      background-color: transparent;
      cursor: default;
  }
  
  .pagination li:first-child a {
      border-left-width: 1px;
      -webkit-border-radius: 3px 0 0 3px;
      -moz-border-radius: 3px 0 0 3px;
      border-radius: 3px 0 0 3px;
  }
  
  .pagination li:last-child a {
      -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;
  }
  
  .pagination-centered {
      text-align: center;
  }
  
  .pagination-right {
      text-align: right;
  }
  
  .pager {
      margin-left: 0;
      margin-bottom: 18px;
      list-style: none;
      text-align: center;
      color: #6c58bF;
      *zoom: 1;
  }
  
  .pager:before,
  .pager:after {
      display: table;
      content: "";
  }
  
  .pager:after {
      clear: both;
  }
  
  .pager li {
      display: inline;
      color: #6c58bF;
  }
  
  .pager a {
      display: inline-block;
      padding: 5px 14px;
      color: #6c58bF;
      background-color: #fff;
      border: 1px solid #ddd;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
  }
  
  .pager a:hover {
      text-decoration: none;
      background-color: #f5f5f5;
  }
  
  .pager .next a {
      float: right;
  }
  
  .pager .previous a {
      float: left;
  }
  
  .pager .disabled a,
  .pager .disabled a:hover {
      color: #999999;
  }
  
  
  /* end */
  </code></pre>
  
  <p>All of the labels (active) are still blue. How can I override it? Thanks.</p>