Skip to main content
Image for post: Yii 2 - Upgrade to bootstrap 4

Yii 2 - Upgrade to bootstrap 4

There is no return to bootstrap 3!

Yes it is! If you upgrade your Yii 2 assets on your installation, there will be many difficulties to use the bootstrap 3 css and js files using the Yii 2 assets. So be sure you need bootstrap 4 only for your projects. First of all we update the dependencies on our composer,json file.


{
   "require": {
       "yiisoft/yii2": "~2.0.*",
       "yiisoft/yii2-bootstrap": "~2.1.0@dev",
       "bower-asset/bootstrap": "~4.0.0@alpha",
       "bower-asset/jquery": "2.2.*"
   }
}

Application config

That's all but now we will have another problem. We have to update the configurations of our frontend project. On your config\main.php:


'components' => [
   ...
   'assetManager' => [
       'appendTimestamp' => true,
       'linkAssets' => false,
       'class' => 'yii\web\AssetManager',
       'bundles' => [
           'yii\web\JqueryAsset' => [
               'js' => [
                   YII_ENV_DEV ? 'jquery.js' : 'jquery.min.js'
               ]
           ],
           'yii\bootstrap\BootstrapAsset' => [
               'css' => [
                   YII_ENV_DEV ? 'css/bootstrap.min.css' : 'css/bootstrap.min.css',
               ],
           ],
           'yii\bootstrap\BootstrapPluginAsset' => [
               'js' => [
                   YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',
               ]
           ]
       ],
   ],
   ...
],

Admin LTE

If you use Admin LTE, you CANNOT upgrade your app to boostrap 4 because the bootstrap 4 assets will not work with Admin LTE. You have to build your new admin area with a bootstrap 4 admin template and it will not be easy. There are many amazing templates available online but I am not sure you will have a lot of time to work on a new admin area and integrate in your PHP application. I am sure there will be a lot of work. We don't have to reinvent the wheel so I think we will continue to use AdminLTE and bootstrap 3 in this case.

Share this post

This website and/or any sub domains use cookies to understand how you to improve your experience.