active bootstrap 4 pagination dreamweaver nov 2019

[sharonk39116496]

I cannot find how to make pagination active (and show different background color), and have the previous, next arrows work, or have the clicked button change colors.  Also, when I try to add page 6 and 7, those pages won't work.  will only take five pages.

here is my code:

<style>

.pagination a {

background-color:#D9EFEC!important; 

 }

.pagination {

    justify-content: center;

background-color:#C3E6E2!important; 

}

.pagination .active  {

  background-color: teal !important;

color:red;

border:thin solid black;

}

</style>

<nav aria-label="Page navigation example">
<ul class="pagination ">
<li class="page-item"> <a class="page-link ml-2" href="#" aria-label="Previous"> <span aria-hidden="true">&laquo;</span> <span class="sr-only">Previous</span> </a> </li>
<li class="page-item"> <a class="page-link ml-2" href="Sewing_gallery_1a.html">
1</a></li>
<li class="page-item"> <a class="page-link ml-2" href="Sewing_Gallery_2a.html">2</a></li>
<li class="page-item"><a class="page-link ml-2" href="Sewing_gallery_3.html">3</a></li>
<li class="page-item"><a class="page-link ml-2" href="Sewing_gallery_4.html">4</a></li>
<li class="page-item"><a class="page-link ml-2" href="Sewing_Gallery_5a.html">5</a></li>

<li class="page-item"> <a class="page-link ml-2" href="#" aria-label="Next"> <span aria-hidden="true">&raquo;</span> <span class="sr-only">Next</span> </a> </li>
</ul>
</nav>

thanks for your help!!!

[BenPleysier · Accepted solution]

I cannot find how to make pagination active (and show different background color)

Add the active class to the item as in

<li class="page-item"> <a class="page-link ml-2 active" href="Sewing_gallery_1a.html">1</a></li>

add page 6 and 7, those pages won't work​

 

Just add the extra lines as in

            <li class="page-item"> <a class="page-link ml-2 active" href="Sewing_gallery_1a.html">1</a></li>

            <li class="page-item"> <a class="page-link ml-2" href="Sewing_Gallery_2a.html">2</a></li>

            <li class="page-item"><a class="page-link ml-2" href="Sewing_gallery_3.html">3</a></li>

            <li class="page-item"><a class="page-link ml-2" href="Sewing_gallery_4.html">4</a></li>

            <li class="page-item"><a class="page-link ml-2" href="Sewing_Gallery_5a.html">5</a></li>

            <li class="page-item"><a class="page-link ml-2" href="Sewing_Gallery_6.html">6</a></li>

            <li class="page-item"><a class="page-link ml-2" href="Sewing_Gallery_7.html">7</a></li>

[osgood_]

Bootstrap doesnt really do anything 'dynamic' so you probably won't be able to use the Next and Previous arrows/buttons if your hard-coding the url to the gallery pages. Just use the pagination numbers and manually apply the 'active' class to the appropriate <li> or <a> tag on each gallery page, as Ben has suggested, to 'mark' the current page the user is on.