My current code snippet in JSF is used for table pagination as follows:
<h:commandButton
value="first"
action="#{registeredAttendies.pageFirst}"
disabled="#{registeredAttendies.firstRow == 0}"
styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
<f:ajax render="@form" />
</h:commandButton>
........
I attempted to apply Bootstrap styling to the above JSF code, but the output was not satisfactory:
<nav>
<ul class="pagination-classic">
<li><a href="#" class="icon icon-xs icon-default mdi mdi-arrow-left-bold"></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#" class="icon icon-xs mdi mdi-arrow-right-bold"></a></li>
</ul>
</nav>
I even tried to maintain the original style using:
<h:commandButton value="first"
action="#{registeredAttendies.pageFirst}"
disabled="#{registeredAttendies.firstRow == 0}"
styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
<f:ajax render="@form" />
</h:commandButton>
Unfortunately, I am still facing issues with the visual appearance. Can you suggest a solution to properly implement the desired styling?