CODEWITHSUNDEEP
csstwitter-bootstrap
Wizard
Wizard

Reputation: 22083

Change background-color of bootstrap's pagination

I tried to change the background-color of pagination with !import

static/css/custom_css.css

.pagination>li.active>a {
  background-color: orange !important;
}

The source code:

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

I have import it on the top

  <link rel="stylesheet" href="{% static 'simplemde/debug/simplemde.css' %}" />

I tested multiple colors, but it did not correspond

enter image description here

Upvotes: 0

Views: 4995

Answers (2)

user3260487
user3260487

Reputation: 75

Check which version of bootstrap you are including. Latest version will have active class added to a tag. If so rewrite like .pagination>li>a.active

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

Its working fine but you need to add this simplemde.css after call bootstrap.css like below

.pagination>li.active>a {
  background-color: orange !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="{% static 'simplemde/debug/simplemde.css' %}" />
 
<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Upvotes: 3

Related Questions