'Bootstrap paginator css not appearing

I am following this tutorial to create a table in php with bootstrap styling.

Using the reference in bootstrap as <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> allows me to see the table with the correct format but the paginator (included below) is not appearing in the correct css: enter image description here.

How i can make the bootstrap css style appear?

Reference code

Paginator code called by the function <?php echo $Paginator->createLinks( $links, 'pagination pagination-sm' ); ?>:

public function createLinks( $links, $list_class ) {
    if ( $this->_limit == 'all' ) {
        return '';
    }


$last       = ceil( $this->_total / $this->_limit );

$start      = ( ( $this->_page - $links ) > 0 ) ? $this->_page - $links : 1;
$end        = ( ( $this->_page + $links ) < $last ) ? $this->_page + $links : $last;

$html       = '<ul class="' . $list_class . '">';

$class      = ( $this->_page == 1 ) ? "disabled" : "";
$html       .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page - 1 ) . '">&laquo;</a></li>';

if ( $start > 1 ) {
    $html   .= '<li><a href="?limit=' . $this->_limit . '&page=1">1</a></li>';
    $html   .= '<li class="disabled"><span>...</span></li>';
}

for ( $i = $start ; $i <= $end; $i++ ) {
    $class  = ( $this->_page == $i ) ? "active" : "";
    $html   .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . $i . '">' . $i . '</a></li>';
}

if ( $end < $last ) {
    $html   .= '<li class="disabled"><span>...</span></li>';
    $html   .= '<li><a href="?limit=' . $this->_limit . '&page=' . $last . '">' . $last . '</a></li>';
}

$class      = ( $this->_page == $last ) ? "disabled" : "";
$html       .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page + 1 ) . '">&raquo;</a></li>';

$html       .= '</ul>';

return $html;
}
}
phphtmlbootstrap-5


Solution 1:[1]

This may be due to the generated HTML missing some of the neccessary Bootstrap classes.

Even though you correctly set the pagination class to the <ul> element, I think you are missing classes in <li> and <a> elements.

This is how it should look like based on BS docs:

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

Try adding .page-item class to <li> element and .page-link class <a> element into your PHP function so it generates correct HTML and you should be fine.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Martin Lévai

Related Questions