Building A Yii2 Basic App Using Bootstrap 4

Bootstrap 4 I believe is the next step in the evolution of Yii 2 and I believe will become the norm as we transition to Yii 3.  I’m assuming that you have a firm grasp of setting up a Yii Basic application.

This is not a beginner’s level Howto and you should be clear that mixing Bootstrap 3 and Bootstrap 4 is currently not possible because of the overlap between the two.  

When you are selecting other extensions you will need to take care that they can handle the new environment.   You’ll find that the “Krajee Yii Extensions” website is a good starting point.

We also to not tackle the testing process and plan to leave Codeception for another time. 

The plan is to take Yii’s basic application from the start and up with the app fully converted to use Bootstrap 4.  It is not recommended that you attempt to convert an existing application as managing the resources can become very difficult.

We start by creating the basic app in a new directory.  You should already have composer installed and updated to the latest and greatest.

  • composer create-project yiisoft/yii2-app-basic basic

You safely ignore the “Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.” message as that’s a conundrum that the Yii project is solving.

As strange as it seems, removing bootstrap3 before you even start the application for the first time simplifies the process.  What we doing is making sure that  all of the bootstrap3 assets don’t make it into the water.

  • composer remove yiisoft/yii2-bootstrap

you can safely ignore the message “Dependency “yiisoft/yii2” is also a root requirement, but is not explicitly whitelisted. Ignoring.”  because we are jerking the rug out from under yii2, however we’re going to be putting a new rug in it’s place in the next step

   • composer require --prefer-dist yiisoft/yii2-bootstrap4

Now that we have the new rug in place, we need to update the applslication to load the new resources.

  • Edit app/assets/AppAsset  

CHANGE 

        public $depends = [
            'yii\web\YiiAsset',
            'yii\bootstrap\BootstrapAsset',
        ];

TO

       public $depends = [
            'yii\web\YiiAsset',
            'yii\bootstrap4\BootstrapAsset',
       ];

The bootstrap 4 assets will now be loaded and we need to update the various areas the application to use the them.  We’ll be cleaning up the views, widgets,  & web directory trees. 

Note: It’s not recommended to do a global search/replace across the entire site, just do it the individual directories

  • Search & Replace All: “yii\bootstrap” To: “yii\bootstrap4”

The header is still using the old classes and we need to update them to use the new improved Bootstrap4 classes in the Breadcrumbs and the Navbar:

  • Edit app/views/layouts/main.php
CHANGE:  use yii\widgets\Breadcrumbs;
TO:      use yii\bootstrap4\Breadcrumbs;
CHANGE:  'class' => 'navbar-inverse navbar-fixed-top', 
TO:      'class' => 'navbar navbar-expand-lg navbar-dark bg-dark',
CHANGE:  'options' => ['class' => 'navbar-nav navbar-right'],
TO:      'options' => ['class' => 'c'],
Change:  Html::beginForm(['/user/security/logout'], 'post')
To:      Html::beginForm(['/user/security/logout'], 'post',
             ['class' => 'navbar-form'])
CHANGE:  ['class' => 'btn btn-link logout']
TO:      ['class' => 'btn btn-link']

This step is optional, however it gives us a visual indication that Bootrap 4 is in the water. We’ll put a Bootstrap 4 specific progress bar on the index page.

  • Edit app/views/site/index.php
ADD BEFORE:  <div class="body-content">
THESE LINES: <?= yii\bootstrap4\Progress::widget(['percent' => 50,
                 'label' => 'Bar Is half full']) ?>  
             <hr/>

This step is optional, however it gives “Krajee Yii Extensions” a way to know that we’re using Bootstrap 4.

  • Edit app/config/params.php
ADD: 'bsVersion' => '4.x',

You should now be able to bring up the new Yii2 application and observe that indeed the glass is indeed “Half Full.”