If you had used CSS Frameworks like Bootstrap and Foundation4 you may noticed the default pagination tags that most frameworks used is ‘ul’ and ‘li’ tags, but Concrete5 renders pagination with ‘span’ tag as default. Also Concrete5 does not generate ‘a’ tag with href=# attribute for current pages, so it may become a challenge to get a neat pagination styled with Bootstrap or Foundation. For generating a cool pagination, open your page_list block template, and find where these codes resides and renders pagination:
<?php if ($showPagination): ?>
<div id="pagination">
<div class="ccm-spacer"></div>
<div class="ccm-pagination">
<span class="ccm-page-left"><?php echo $paginator->getPrevious('« ' . t('Previous')) ?></span>
<?php echo $paginator->getPages() ?>
<span class="ccm-page-right"><?php echo $paginator->getNext(t('Next') . ' »') ?></span>
</div>
</div>
<?php endif; ?>
And replace this chunk of code with this:
<?php if ($showPagination):?>
<div id="pagination">
<div class="pagination">
<ul class="pagination">
<li><?php echo $paginator->getPrevious('« ' . t('Previous'), 'a') ?></li>
<?php echo $paginator->getPages('li') ?>
<li><?php echo $paginator->getNext(t('Next') . ' »', 'a') ?></li>
</ul>
</div>
</div>
<?php endif; ?>
Now you should be all well with both Bootstrap and Foundation4. The only issue with this code for Foundation4 users is that this does not highlight current page, for solve this issue just add this code at line 2 after "if ($showPagination):"
<?php
$paginator->classCurrent='current';
?>