ListView/LinkPage Bootstrap4 Styling issue

Hello,
I’ve tried to wrap my head around why the pagination will not display how bootstraps pagination looks. I’ve tried to mimic bootstraps and whats in yii\widgets\LinkPage; and the options I can see in order to get the pagination to display and ends up looking like…

ListView::widget([
	'dataProvider' => $articles,
	'itemView' => '_article',
	//'emptyText' =>'',
	'summary' => '',
	'itemOptions' => [
		'tag' => false
	],
	'options' => [
		'tag' => 'div',
		'class' => 'row',
		'id' => false
	],
	'layout' => '{items}<nav>{pager}</nav>',
	'pager' => [
		'options' => [
			'tag' => 'ul',
			'class' => 'pagination justify-content-center',
			'id' => 'pager-container',
		],
		//First option value
		'firstPageLabel' => 'first',
		//Last option value
		'lastPageLabel' => 'last',
		//Previous option value
		'prevPageLabel' => 'previous',
		//Next option value
		'nextPageLabel' => 'next',
		//Current Active option value
		'activePageCssClass' => 'page-active',
		//Max count of allowed options
		'maxButtonCount' => 3,

		// Css for each options. Links
		'linkOptions' => ['class' => 'page-link'],
		'disabledPageCssClass' => 'disabled',

		// Customzing CSS class for navigating link
		'pageCssClass' => ['class' => 'page-item'],
		'prevPageCssClass' => 'page-back',
		'nextPageCssClass' => 'page-next',
		'firstPageCssClass' => 'page-first',
		'lastPageCssClass' => 'page-last',
		],
]); 

the html output:

<nav><ul id="pager-container" class="pagination justify-content-center"><li class="page-first"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">first</a></li>
<li class="page-back"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">previous</a></li>
<li class="page-item"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=1&amp;per-page=3" data-page="0">1</a></li>
<li class="page-item page-active"><a class="page-link" href="/index.php?r=site%2Findex&amp;page=2&amp;per-page=3" data-page="1">2</a></li>
<li class="page-next disabled"><span>next</span></li>
<li class="page-last disabled"><span>last</span></li></ul></nav>

The text is out a lined and isn’t styled. Any help would be greatly appreciated!

1 Like

Oh, geez… I pulled a morty… I reread the LinkPager Widget and Bootstrap 4 and learnt that I had to configure LinkPager with LinkPager Bootstrap in my configuration files.

	'container' => [
		'definitions' => [
			\yii\widgets\LinkPager::class => \yii\bootstrap4\LinkPager::class,
		],
	],
1 Like

This helped me today, thanks!