Change Active class CSS in Bootstrap

Question

I am using AngularJS and Bootsrtrap in my code. I am using this library for pagination for tables in it. It says here that I can style it with bootstrap, and I wanted to change color of selected number to orange.

Class of that field is active in CSS, and I tried to override its style in my css, but nothing changed. I used this CSS:

.active {
    background-color: #FFC773;
}

Can anyone help me solve this?

Answer 1

Above given answers are absolutely correct but you should also define the CSS for other states like focus, active and hover:

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: orange;
    border-color: organge;
}

This is to avoid various other issues.