Yii2 override bootstrap.css / bootstrap.min.css

Question

I change this in bootstrap.css:

.table-hover > tbody > tr:hover {
    background-color: #DBEADC;
}

and this in bootstrap.min.css:

.table-hover>tbody>tr:hover{background-color:#DBEADC}

When I'm updating Yii2, these changes of course are going to be overwritten. What is the best practice to handle this? I mean how can I persistently override this one color, so that all other things should be updated when a new version is coming?

Answer 1

Create your own .css file (Under /web/css folder), it will always have preference over the boostrap ones that are loaded by default by Yii.

Example, on how to load own files, inside your main asset class, normally (assets/AppAsset.php) you must add the file path in the $css property:

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css' // this right here
    ];
    public $js = [];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap4\BootstrapAsset',
    ];
}

This is the way of doing it, mutating files that will get overriden after updates, WILL never be the right way.