Change background color of button in Twitter Bootstrap using CSS

Question

I am using the following pagination button styles provided by Twitter Bootstrap:

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

This is how they currently look like:

How do I need to change my CSS style to change the background color of these buttons from green to some other color?

I tried this CSS code, but it did not change the button styles:

.next {
    background-color: #ecf0f1;
    color: #2d525d;
}

Thank you!

Solution 1

You need to overwrite the css codes:

.next a {
    background-color: #ecf0f1 !important;
    color: #2d525d !important;
}

Edit: The color and background-color styles are for "a" element inside the li.

Solution 2

you can also add !important to your custom css

.next {
background-color: #ecf0f1 !important;
color: #2d525d;
}

Solution 3

Use

!important

after you css but before ;

It pretty much means ignore anything else and use THIS !important

you will need to use this to break out of default styling in some frameworks, its also useful for media queries.