Skip to main content
S
sharonk39116496
Inspiring
February 3, 2020
Answered

active bootstrap 4 pagination dreamweaver nov 2019

  • February 3, 2020
  • 2 replies
  • 781 views

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!!!

This topic has been closed for replies.
Correct answer BenPleysier
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>
 

2 replies

O
osgood_
Legend
February 3, 2020

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.

 

    BenPleysier
    Community Expert
    BenPleysierCommunity ExpertCorrect answer
    Community Expert
    February 3, 2020
    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>
     
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices