How to remove Bootstrap 3 and install Bootstrap 4 in the yii2 basic template?

Open terminal and login to your server using ssh. Navigate to your project directory. Make sure you are within your project root directory.

Enter the following command which will remove bootstrap 3 from your Yii2 application.

composer remove yiisoft/yii2-bootstrap

Once bootstrap 3 has been removed, enter the following command to install bootstrap 4:

composer require yiisoft/yii2-bootstrap4

Now you will encounter a lot of errors. Let’s resolve them one by one.

Go to AppAsset.php and change this line 'yii\bootstrap\BootstrapAsset', to this 'yii\bootstrap4\BootstrapAsset',

Now go to main.php and change these line

use yii\bootstrap\Breadcrumbs;
use yii\bootstrap\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

to these

use yii\bootstrap4\Breadcrumbs;
use yii\bootstrap4\Html;
use yii\bootstrap4\Nav;
use yii\bootstrap4\NavBar;

After that go to widgets/Alert.php and on line 62 change the bootstrap namespace to bootstrap4.

from
echo \yii\bootstrap\Alert::widget()

to 
echo \yii\bootstrap4\Alert::widget()

in the same file, on line 25, change the namespace to \yii\bootstrap4\Widget on the Alert class extension line.

To fix the breadcrumbs, go to main.php again, navigate to line no. 10 and change the breadcrumbs line to this use yii\bootstrap4\Breadcrumbs;

Now let’s fix the navbar. For that go to main.php line no. 35. and change the navbar classes to the following:

navbar-expand-md navbar-dark bg-dark fixed-top

To align the nav menus to the right, remove navbar-right and add the ml-auto class to the Nav widget on line no. 39.

To fix the form errors on the contact page, open /views/site/contact.php and on line no.8 change the bootstrap namespace and the declaration of the variable on line no. 4 to bootstrap4 as follows:

use \yii\bootstrap4\ActiveForm;

Do the same process for Login page. Go to /views/site/login.php and change bootstrap to bootstrap4.

The use \yii\bootstrap4\ActiveForm; also handles the display of form validation messages. SO make sure to use the same declaration for all the forms in the yii2 front end as well as backend.

Till now we have fixed the most common errors on the front end. Let’s now move to fixing the pagination and ActionButtons in the backend. To fix the pagination layout of the GridView, add the following line to the config of the GridView:

'pager'=>[
          'class'=>\yii\bootstrap4\LinkPager::class,
         ],

Now we need to do the same thing for the ListView widget. Add the above pager configuration to the ListView config and you are good to go.

The process to fix the ActionButtons is a bit long.

First of all, create a 'grid' directory in your yii2 project root and add an ActionColumn.php file to it. ActionColumn is a class which is overriding the base ActionColumn class. We will override its two methods as well. The complete code for the ActionColumn class is as follows:

<?php 
namespace app\grid;
use Yii;
use yii\helpers\Html;

/**
 * 
 */
class ClassName extends \yii\grid\ActionColumn
{
	
	/**
     * Initializes the default button rendering callbacks.
     */
    protected function initDefaultButtons()
    {
        $this->initDefaultButton('view', 'far fa-eye');
        $this->initDefaultButton('update', 'far fa-edit');
        $this->initDefaultButton('delete', 'fas fa-trash', [
            'data-confirm' => Yii::t('yii', 'Are you sure you want to delete this item?'),
            'data-method' => 'post',
        ]);
    }

    /**
     * Initializes the default button rendering callback for single button.
     * @param string $name Button name as it's written in template
     * @param string $iconName The part of Bootstrap glyphicon class that makes it unique
     * @param array $additionalOptions Array of additional options
     * @since 2.0.11
     */
    protected function initDefaultButton($name, $iconName, $additionalOptions = [])
    {
        if (!isset($this->buttons[$name]) && strpos($this->template, '{' . $name . '}') !== false) {
            $this->buttons[$name] = function ($url, $model, $key) use ($name, $iconName, $additionalOptions) {
                switch ($name) {
                    case 'view':
                        $title = Yii::t('yii', 'View');
                        break;
                    case 'update':
                        $title = Yii::t('yii', 'Update');
                        break;
                    case 'delete':
                        $title = Yii::t('yii', 'Delete');
                        break;
                    default:
                        $title = ucfirst($name);
                }
                $options = array_merge([
                    'title' => $title,
                    'aria-label' => $title,
                    'data-pjax' => '0',
                ], $additionalOptions, $this->buttonOptions);
                $icon = isset($this->icons[$iconName])
                    ? $this->icons[$iconName]
                    : Html::tag('span', '', ['class' => "$iconName"]);
                return Html::a($icon, $url, $options);
            };
        }
    }
}

Go to the page where you have the grid or list view implemented, and change the following line

from
[
'class'=>\yii\grid\ActionColumn,
],

to 
[
'class'=>app\grid\ActionColumn,
],

That’s it! You have successfully installed and configured bootstrap4 into your yii2 application.