Yii2 and bootstrap 4, how to upgrade yiisoft/yii2-bootstrap components to bootstrap4?

Question

Yii

I register in composer.json

"yiisoft/yii2-bootstrap": "[email protected]",
"yiisoft/yii2-swiftmailer": "~2.0.0",
"bower-asset/bootstrap": "4.0.0",
"bower-asset/font-awesome": "4.*",

Next: "composer update --prefer-dist"
All files are downloaded. In the console I noticed:

- Updating bower-asset/bootstrap (v3.3.7 => v4.0.0): Downloading (100%)
- Updating yiisoft/yii2-bootstrap (2.0.8 => 2.0.0-beta): Downloading (100%)

what?????
All JS and CSS files have been updated to bootstrap4, but the components in vendor/yiisoft/yii2-bootstrap remain old. As a result, when displaying menus or forms, the html code remains for bootstrap3, and the styles are from bootstrap4, which is why the layout on the pages is not correct.
If anyone does not understand what I mean, here's an example:
Forms in bootstrap4 have an error message under the input class invalid-feedback , and in v3 help-block . And there are many such differences.
Can anyone tell me if I can somehow update the components to bootstrap4?

Answer 1

Connect the extension via composer:
Then in assets add

class AppAsset extends AssetBundle
{
    public $depends = [
        'yii\web\YiiAsset',
        'grozzzny\depends\bootstrap4\Bootstrap4Asset',
        'grozzzny\depends\bootstrap4\Bootstrap4PluginAsset',
    ];
}

The Bootstrap4Asset class, when initialized, subscribes to View events and, if possible, removes bootsrap 3

class Bootstrap4Asset extends AssetBundle
{
    public $sourcePath = '@vendor/twbs/bootstrap/dist';
    public $css = [
        'css/bootstrap.css',
    ];

    public function init()
    {
        parent::init(); // TODO: Change the autogenerated stub
        Yii::$app->view->on(View::EVENT_AFTER_RENDER, function (){
            unset(Yii::$app->view->assetBundles['yii\bootstrap\BootstrapAsset']);
        });
        Yii::$app->view->on(View::EVENT_BEGIN_BODY, function (){
            unset(Yii::$app->view->assetBundles['yii\bootstrap\BootstrapAsset']);
        });
    }
}

This way you can play with layouts .. For example, the admin panel can work safely on bootstrap 3, and the frontend on bootstrap 4.
But that's not all .. There are nuances ..
With the modal window, I had to inherit from the bootstrap 3 modal class
With validation of inputs, overridden mixins bootstrapa 4 and added the implementation from bootsrapa 3 to the mixin. (SCSS)
The menu widget became something like this:

<?= Nav::widget([
    'options' => ['class' => 'navbar-nav d-flex justify-content-between w-100'],
    'items' => [
        [
            'label' => ''Услуги,
            'options' => ['class' => 'nav-item'],
            'linkOptions' => ['class' => 'nav-link'],
            'url' => ['services'],
            'active' => Yii::$app->controller->id == 'services'
        ],
 ....
        [
            'label' => 'Контакты',
            'options' => ['class' => 'nav-item'],
            'linkOptions' => ['class' => 'nav-link'],
            'active' => Yii::$app->controller->id == 'contacts',
            'url' => ['/contacts']
        ]
    ]
]);?>

Bread crumbs:

<nav aria-label="breadcrumb" class="mb-3">
    <?= Breadcrumbs::widget([
        'links' => $this->params['breadcrumbs'],
        'options' => ['class' => 'breadcrumb'],
        'tag' => 'ol',
        'itemTemplate' => "<li class='breadcrumb-item'>{link}</li>\n",
        'activeItemTemplate' => "<li class=\"breadcrumb-item active\" aria-current=\"page\">{link}</li>\n",
    ])?>
</nav>

Pagination:

<nav aria-label="Page navigation">
            <?= LinkPager::widget([
                'pagination' => $provider->pagination,
                'linkContainerOptions' => ['class' => 'page-item'],
                'linkOptions' => ['class' => 'page-link'],
                'disabledListItemSubTagOptions' => ['tag' => 'a', 'class' => 'page-link']
            ]) ?>
        </nav>

Alerts:

<?= Alert::widget([
            'options' => ['class' => 'alert alert-danger show', 'role' => 'alert'],
            'body' => $message,
        ]) ?>

In general, in this cms assembly from easyiicms, which you can safely work with bootstrap 4. There are mixtures of less and scss. CMS is purely template and modified .. I wrote for myself, but it's up to you
Here is another Material Design for Bootstrap 4 add-on with modules from https://mdbootstrap.com :

class AppAsset extends AssetBundle
{
    public $depends = [
        ..
        //Material Design for Bootstrap 4
        'grozzzny\depends\mdbootstrap\MDBootstrapAsset',
        'grozzzny\depends\mdbootstrap\MDBootstrapPluginAsset',
        ..
   ];
}

Add-ons can be specified in the assetManager in the main configuration:

'assetManager' => [
            'bundles' => [
                // Если решили переопределить scss:
                'grozzzny\depends\mdbootstrap\MDBootstrapAsset' => [
                    'basePath' => '@webroot',
                    'baseUrl' => '@web',
                    'css' => ['css/mdbootstrap/mdb.css'], 
                ],
                // Если решили подключить доступные модули в коллекции MDB:
                'grozzzny\depends\mdbootstrap\MDBootstrapPluginAsset' => [
                    'chart' => true,
                    'enhancedModals' => true,
                    'formsFree' => true,
                    'jqueryEasing' => true,
                    'scrollingNavbar' => true,
                    'velocity' => true,
                    'waves' => true,
                    'wow' => true,
                ],
            ],
        ],

I will create a normal layout for Bootstrap 4 with all examples and explanations if this answer gets likes

Answer 2

yiisoft/yii2-bootstrap - not designed for the 4th bootstrap in principle. So don't even try it yet.

Answer 3

Bootstrap4 yii2 extension released
https://www.yiiframework.com/extension/yiisoft/yii...