Tabs Widget - Can Not Align Tab Center

Hi everybody!

How to align tab center instead of align left default.

I have configured following:

echo Tabs::widget([




but i can not align tab center.

Anybody have any ideas?Thanks.

works for me tried your code here is the result

I presume you are talking about the entire tab content centered - instead of text inside the tab headers.

By default bootstrap includes a float:left - so you need to override the CSS.

However a simpler approach to fake this to some extent can be by wrapping in a container with left and right margin. For example:

echo '<div style="margin:auto 30%;">';

echo \yii\bootstrap\Tabs::widget([



        'label' => 'One',

        'content' => 'Anim pariatur cliche...',

        'active' => true



        'label' => 'Two',

        'content' => 'Anim pariatur cliche...',



echo '</div>';

However this will just make the tab content shorter in the center of the page (but still will be floated left).

PS: I am in the process of creating an extended Tabs extension with other features and will release it soon.

Sorry for my unclear question.

I wonder that aligned tab headers to center widget container, not aligned center text inside the tab headers.

add this in your site.css and it should center align the tabs

.nav-tabs {

	text-align: center;


.nav-tabs > li {

	float: none;

	display: inline-block;