CODEWITHSUNDEEP
htmlcssbootstrap-4frontend
eyadali05
eyadali05

Reputation: 13

How to change the color of bootstrap's pagination

So I am designing a site and I decided to use bootstrap's pagination to navigate between pages, since I am limited on time, really. any Idea how could I use something like "bg-dark", "bg-primary"...etc to change the color of my pagination? or even using plain css to change it (I would not mind really)

Upvotes: 0

Views: 7275

Answers (2)

Emy
Emy

Reputation: 639

add class on all from them: https://getbootstrap.com/docs/4.0/utilities/colors/ and use style css with active element example:

.page-item.active .page-link {
  color: #fff !important;
  background: #f00 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<ul class="pagination">
    <li class="page-item disabled">
      <a class="bg-warning text-danger page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="bg-warning text-danger page-link" href="#">1</a></li>
    <li class="page-item bg-success  active">
      <a class="bg-warning text-danger page-link" href="#">2 <span class=" bg-success sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="bg-warning text-danger page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="bg-warning text-danger page-link" href="#">Next</a>
    </li>
  </ul>

Upvotes: 4

Marco somefox
Marco somefox

Reputation: 368

if you are using something like the official example:

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

Then you could add a css like this:

.pagination .page-link {
    background: red;
    color: white;
}

This sets the color of any element with page-link class inside the element with pagination class

Upvotes: 4

Related Questions