[Resolved] Horizontally centering the pagination links

[Author]

Posts

[josephQ]

Hi there,

Right now the pagination links are right-aligned to my pages. Is there a way to horizontally center-align them?

Thanks!

[Beda]

Sure, with Custom HTML/CSS

Toolset will offer you two possible outputs:
raw, or legacy, and Bootstrap.

Natively, when you insert any element in the view, such as pagination or filters, it'll use the Bootstrap 3.x markups.
(In a Minimal set, so you can still place and customize as you like)

If you instead prefer a most raw output so you can use your own HTML and CSS to style, and alter the elements, you can choose "Raw output" in the "Output style" section when you insert the pagination.

This Document is quite elaborated on the subject:
https://toolset.com/documentation/user-guides/custom-pagination-for-wordpress-archives/

[josephQ]

Beda,

Thanks for your response. You mentioned that the pagination uses the native Bootstrap markup. That's the part the confuses me: the pagination markup *isn't* in a typical Bootstrap <div>. Is there a way to insert it into one, or do I need to do that myself manually? I've attached a screenshot of the markup on hidden link.

[Beda]

This is what a "Fully Styled Output" generates in your HTML editor for a simple pagination:

<ul class="pagination">
	<li class="page-item">[wpv-pager-prev-page][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page]</li>
	<li class="page-item">[wpv-pager-next-page][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]</li>
</ul>

This, when it's raw:

[wpv-pager-prev-page][wpml-string context="wpv-views"]Previous[/wpml-string][/wpv-pager-prev-page][wpv-pager-next-page][wpml-string context="wpv-views"]Next[/wpml-string][/wpv-pager-next-page]

Now, in the front end this translates to one using Bootstrap CCS, the other not.

See my screenshots.

If this is not the same on your site, please can you let me log in to see this?

Please first as well check that in Toolset > Settings > General > Bootstrap loading either of the correct settings is checked (depends if your theme uses Bootstrap, you need it to work with that pagination)