How to change the color of bootstrap's pagination

Question

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)

Answer 1

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>

Answer 2

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