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?

I guess it is very difficult to help you using the info you've provided. At least create a working demo, so we can see your full code in action. — Amar Syla
– Amar Syla, Commented Oct 11, 2015 at 12:47
It is clear since it is referenced that pagination is using twitter bootstrap pagination. — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 11, 2015 at 12:59

Shashank Agrawal · Accepted Answer · 2015-10-11 13:21:10Z

4

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.

edited Oct 11, 2015 at 13:21

answered Oct 11, 2015 at 13:03

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dejan Over a year ago

Yeah, this one solved the problem i described below. Those other states were problem. Thanks!

Shashank Agrawal Over a year ago

@FarzadYZ you are right, border color is needed also, otherwise it will look odd. :-)

Farzad Yousefzadeh · Accepted Answer · 2015-10-11 12:53:51Z

2

Do not use .active alone! That is not a proper reference to an active class in a large framework. Just be specific and use this snippet below:

.pagination > .active > a {
    background-color: orange;
    border-color: red;
}

answered Oct 11, 2015 at 12:53

Farzad Yousefzadeh

2,6291 gold badge24 silver badges29 bronze badges

2 Comments

Dejan Over a year ago

It is ok when it is first rendered. But when I click other page it changes color to original blue color. Do you know what seems to be problem?

Farzad Yousefzadeh Over a year ago

Can you provide a fiddle please?

Michel · Accepted Answer · 2015-10-11 13:06:02Z

2

Try with:

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:visited {
    background-color: #FFC773;
}

See plunker

Adjust also border if you want to.

edited Oct 11, 2015 at 13:06

answered Oct 11, 2015 at 12:53

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Collectives™ on Stack Overflow

Change Active class CSS in Bootstrap

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related