Changing pagination colour Bootstrap

Question

Here is my pagination control:

I am trying to make the labels of the pagination purple, so far I have been unable to override it. Here is my CSS:

/* 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 */

All of the labels (active) are still blue. How can I override it? Thanks.

Numbing

Answer 1

.pagination > li > a
{
    background-color: white;
    color: #5A4181;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181 !Important;
}

.pagination > .active > a:hover
{
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181;
}

Enfeeble

Legend !! Thanks a bunch – Amora

Adding styles for disabled items makes it perfect: .pagination > .disabled > a { color: #aaa; } – Selfeducated

Answer 2

.example .pagination>li>a,
.example .pagination>li>span {
  border: 1px solid purple;
}
.pagination>li.active>a {
  background: purple;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="example">
    <nav>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
        <li><a href="#">5</a>
        </li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

It might not be working due to specificity issues, try adding some parent class, or style it using ID for that pagination UL, like I have given a parent <div class="example">

Read more about Specificity here

Yep

Placing the rule later in the document than the original rule would work as well if their selector had the same specificity. – Northnorthwest

The 1,2,3,4,5 labels are still blue and not purple – Numbing

@Numbing i just gave an example, you'll have to style the whole pagination element similarly – Yep

@user3754111, check this you can change color and make rounded corners. hope helps someone. – Hoist

Answer 3

This is not too hard once you get all of the right classes. So long as your CSS comes after the bootstrap CSS, this takes care of everything.

I'm using bootstrap 3.3.5.

My default settings look like this:

I apply the following CSS to color all the elements including the active page. Copy and change colors as desired:

.pagination > li > a
{
    background-color: white;
    color: purple;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: purple;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: purple;
    border: solid 1px purple;
}

.pagination > .active > a:hover
{
    background-color: purple;
    border: solid 1px purple;
}

This is the result.

Dareece

How do you get the cool Rewind (<<) and Fast Forward (>>) symbols for the buttons implemented? Are they just 2 simple UTF-8 characters next to each other? Looks cool! – Tantalum

Yes, they're just two UTF arrows. – Dareece

Answer 4

Just change this SASS variables with your colors:

$pagination-color: $link-color !default;
$pagination-bg: $white !default;
$pagination-border-color: $gray-300 !default;

$pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: $gray-300 !default;

$pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default;

$pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: $gray-300 !default;

Pryor

Answer 5

This is the selector and style rules in Boootstrap 3.3.5 that controls the background color of a pagination element:

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

Your selectors are not specific enough. Their specificity value is 0 0 2 1 and the Bootstrap selectors is 0 0 2 2.

Your Specificity Values:

.pagination a:hover = `0 0 2 1`
.pagination .active a = `0 0 2 1`
.pagination a:focus = `0 0 2 1`

0 0 1 0 for the class .pagination, 0 0 1 0 for a pseudo class :hover and 0 0 0 1 for the element a.

Bootstrap Specificity Values:

.pagination > li > a:focus = `0 0 2 2`

0 0 1 0 for the class .pagination, 0 0 1 0 for a pseudo class :focus and 0 0 0 1 for each element, a and li.

Here's what you can do:

1. Change the value at the source, change #eee to purple.
2. Override the selector. Make sure it has the same or greater specificity than the original selector. Note: if using the same specificity as the original selector make sure it comes after the original selector in your document.

Option #1

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

Option #2

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

/* ...a bunch of other CSS... */

/* Now do one of the following options */

/* SAME SPECIFICITY OPTION - 0 0 2 2, needs to come AFTER original rule */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - SMALL increase, 0 0 2 3 */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover {
    background-color: purple;
}
/* GREATER SPECIFICITY - LARGE increase, 0 1 1 1 */    
#my-paginator a:focus,
#my-paginator a:hover,
#my-paginator span:focus,
#my-paginator span:hover {
    background-color: purple;
}

Ideally you want to increase specificity in small amounts if you can and shy away from using the ID option. Check out this handy Specificity Calculator.

Northnorthwest

active color on focus may be not good idea in some situations. Two rules less. – Hexapartite

@RomanSusi All solutions in my answer are built upon Bootstrap's style definitions to increase specificity so style properties take effect. – Northnorthwest

Answer 6

For Bootstrap 4 4.5:

(In this example in CSS in dark theme, but of course you can change the colours)

   .page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #d9d9d9 !important;
    background-color: #4f4f4f !important;
    border: 1px solid #262626 !important;
}
.page-link:hover {
        z-index: 2;
        color: #fff !important;
        text-decoration: none;
        background-color: #a4a4a4 !important;
        border-color: #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #808080 !important;
    border-color: #353535;
}
 

Cantaloupe

Answer 7

For Bootstrap 5:

.pagination {
      --bs-pagination-color: #808080;
      --bs-pagination-hover-color: #6d6d6d;
      --bs-pagination-active-color: #fff;
      --bs-pagination-active-border-color: #33055b;
      --bs-pagination-active-bg: #502a71;
      --bs-pagination-hover-bg: #ffc0f7;
} 

From bootstrap docs: https://getbootstrap.com/docs/5.3/components/pagination/

Scoggins

Unfortunately this does not work in combination with sass variables. – Breed

Answer 8

Important css attribute like this:

.pagination > li > a, .pagination > li > span{
     color:black !Important;       
}

Greeneyed

Answer 9

CSS : Add below active style changes to override existing behavior.

.pager li .active{
      background-color: rgb(181, 181, 214);
      color: rgb(9, 9, 80);
}

HTML : How to apply this as class

<li><a href='#' class='active'>1</a></li>

Disario

Answer 10

Includes even the disabled button

/* Pagination Color */
  .pagination > li > a
  {
      background-color: #343A40;
      color: #ffffff;
  }
  
  .pagination > li > a:focus,
  .pagination > li > a:hover,
  .pagination > li > span:focus,
  .pagination > li > span:hover
  {
      color: #fff;
      background-color: #1D2124;
      border-color: #ddd;
  }
  
  .pagination > .active > a
  {
      color: white;
      background-color: #007BFF !Important;
      border: solid 1px #007BFF !Important;
  }
  
  .pagination > .active > a:hover
  { 
      background-color: #0066CC !Important;
      border: solid 1px #0066CC;
  }

  .pagination > .disabled > span,
  .pagination > .disabled > span:hover,
  .pagination > .disabled > a,
  .pagination > .disabled > a:focus {
      color: #fff !Important;
      background-color: #343a40 !Important;
      border-color: #343a40;
  }

Amphora