user3754111
user3754111

Reputation: 869

Changing pagination colour Bootstrap

Here is my pagination control:

enter image description here

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.

Upvotes: 42

Views: 107217

Answers (10)

Adam
Adam

Reputation: 323

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;
  }

Upvotes: 0

user1880531
user1880531

Reputation: 67

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/

Upvotes: 2

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;

Upvotes: 8

Johar Khan
Johar Khan

Reputation: 408

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>

Upvotes: 0

Leandro Bardelli
Leandro Bardelli

Reputation: 11578

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;
}
 

Upvotes: 1

ddd
ddd

Reputation: 541

.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;
}

Upvotes: 54

Steve Lautenschlager
Steve Lautenschlager

Reputation: 658

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:

Bootstrap Defaults

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.

enter image description here

Upvotes: 7

hungerstar
hungerstar

Reputation: 21685

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.

Upvotes: 6

Miroslav Siska
Miroslav Siska

Reputation: 401

Important css attribute like this:

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

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

.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

Upvotes: 17

Related Questions