Using the Bootstrap widget in yii framework

Yii2 supports Bootstrap as a core feature. Bootstrap framework CSS and JavaScript files are injected by default in all pages and we could even use this feature to only apply CSS classes or call our own JavaScript function provided by Bootstrap.

However, Yii2 embeds Bootstrap as a widget, and we can access this framework’s capabilities like any other widget.

The most used are:

Class nameDescription
yiibootstrapAlertThis class renders an alert Bootstrap component
yiibootstrapButtonThis class renders a Bootstrap button
yiibootstrapDropdownThis class renders a Bootstrap drop-down menu component
yiibootstrapNavThis class renders a nav HTML component
yiibootstrapNavBarThis class renders a navbar HTML component

For example, yiibootstrapNav and yiibootstrapNavBar are used in the default main template.

This is an extract from the main layout view (in basic/views/layouts/main.php):

                'brandLabel' => 'My Company',
                'brandUrl' => Yii::$app->homeUrl,
                'options' => [
                    'class' => 'navbar-inverse navbar-fixed-top',
            echo Nav::widget([
                'options' => ['class' => 'navbar-nav navbar-right'],
                'items' => [
                    ['label' => 'Home', 'url' => ['/site/index']],
                    ['label' => 'About', 'url' => ['/site/about']],
                    ['label' => 'Contact', 'url' => ['/site/contact']],
                    Yii::$app->user->isGuest ?
                        ['label' => 'Login', 'url' => ['/site/login']] :
                        ['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                            'url' => ['/site/logout'],
                            'linkOptions' => ['data-method' => 'post']],

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest