Yii2 - Upgrading to Bootstrap 4

How-tos

2.0

newbie,Twitter Bootstrap,navbar,bootstrap4

Yii2 - Converting from Bootstrap3 to Bootstrap4  
<br>
This article has been written because while conversion is a largely pain-free process, there are some minor issues. These are not difficult to solve, but it is not immediately obvious where the problem lies.  
<br>


1 - Install Bootstrap4At the end of all this, I had the class line changed to something which gave me a navbar very similar to the original:
` //Bootstrap3: 'class' => 'navbar-inverse navbar-fixed-top', //Changed for Bootstrap4: 'class' => 'navbar navbar-expand-md navbar-light bg-dark', `
 
So, that fixed my navbar. Running my tests pointed me to other problems, but I won't go into those. Now that you know the process, you can find all your errors and fix them in the same way - I need to fix problems in some of my forms where the action buttons are now being rendered in a space too small to be visible
 
<br>
 
 
**Breadcrumbs**
 
 
> **Note - March 2020**: This entire section on Breadcrumbs may no longer be an issue. While I've left the section in as a tutorial, before making any changes read what Davide has to say in the user comments.
 
 
So, that fixed my navbar. Next, I noticed that the breadcrumbs were not quite right - the slash separating the path elements was no longer there. Preparing for a lot of debugging, I went to the Bootstrap site to look for a little inspiration. I didn't need to look any further - Bootstrap 4 requires each Breadcrumb element to have a class of "breadcrumb-item". After I spent a little time looking at vendors/yiisoft/yii2/widgets/Breadcrumbs.php to get some understanding of the issue, I discovered all that's needed is to change the itemTemplate and activeItemTemplate. Of course, since these are part of the Yii2 framework, you don't want to change that file, otherwise, it will probably get updated at some stage, and all your changes would be lost. Since both of these attributes are public, you can change them from outside the class, and the easiest place to do this is in frontend/views/main.php:
 
```html
 
    <div class="container">
 
        <?= Breadcrumbs::widget([
 
            'itemTemplate' => "\n\t<li class=\"breadcrumb-item\"><i>{link}</i></li>\n", // template for all links
 
            'activeItemTemplate' => "\t<li class=\"breadcrumb-item active\">{link}</li>\n", // template for the active link
 
            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
 
        ]) ?>
 
        <?= Alert::widget() ?>
 
        <?= $content ?>
 
    </div>```
 
<br>
 
 
 
 
**Data Grid ActionColumn**
 
One of my pages was a data grid generated for me by gii. On each row it has a set of buttons that you can click to view, edit or delete the row. Under Bootstrap 4, the ActionColumn disappeared. Viewing the page source showed me it was there, but I couldn't see it or click on it. Going to the migration guide, it turns out that Bootstrap 3 includes icons, but Bootstrap 4 doesn't. I got a lot of help from a [question asked in the Yii2forum.](https://github.com/yiisoft/yii2/issues/17479). In the end, my solution was to get a local copy of FontAwesome 5 by including the line "fortawesome/font-awesome": "^5.12.1" in the require section of composer.json, and then choosing the icons that I wanted. I spent a lot of time figuring out how to do this, but when I was done, it seemed almost anti-climactic in it's simplicity. This is what I did in my data form:
 
 
````html
 
            ['class' => 'yii\grid\ActionColumn',
 
                'buttons' => [
 
                    'update' =>  function($url,$model) {
 
                        return Html::a('<i class="fas fa-edit"></i>', $url, [
 
                            'title' => Yii::t('app', 'update')
 
                        ]);
 
                    },
 
                    'view' =>  function($url,$model) {
 
                        return Html::a('<i class="fas fa-eye"></i>', $url, [
 
                            'title' => Yii::t('app', 'view')
 
                        ]);
 
                    },
 
                    'delete' => function($url,$model) {
 
                        return Html::a('<i class="fas fa-trash"></i>', $url, [
 
                            'title' => Yii::t('app', 'delete')
 
                        ]);
 
                    }
 
                 ]
 
            ],
 
 
````
 
 
 
 
<br>
 
 
**Functional Tests**
 
 
Not seeing anything more visually, at least nothing that was obvious, I now ran the suite of tests. These were all previously passing, but now several of them failed. One of them was the Contact Form, so I ran that one separately and the tests informed me they were failing because they couldn't see the error message:
 
 
```
 
1) ContactCest: Check contact submit no data
 
 Test  ../frontend/tests/functional/ContactCest.php:checkContactSubmitNoData
 
 
 
 Step  See "Name cannot be blank",".help-block"
 
 
 
 Fail  Element located either by name, CSS or XPath element with '.help-block' was not found.
 
 
```
 
<br>
 
 
I, on the other hand, could see the error messages on the form, so I used the browser's page source and discovered that the css class was no longer "help-block", it had changed to "invalid-feedback". Easy enough - in frontend/tests/_support/FunctionalTester.php, I changed the expected css class:
 
 
    public function seeValidationError($message)
 
    {
 
        $this->see($message, '.invalid-feedback');
 
    }
 
 
Of course, this little excerpt is just an example. I found the same thing had to be done in several locations, but all were easily found and resolved.
 
 
<br>
 
 
After this, running my tests pointed me to no other problems, but I don't expect that to mean there **aren't** any other problems. While everything seems to be working so far, I expect there are more issues hiding in the woodwork. Somehow, those problems don't seem quite so insurmountable anymore.