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?

Add your change in separate css file and include this file after the bootstrap's one. — Bizley
– Bizley, Commented Jul 16, 2019 at 7:41
Why you have to do the change both in bootstrap and bootstrap.min?? Are you using both of them? — Mosh Feu
– Mosh Feu, Commented Jul 16, 2019 at 7:41
I have no idea... I like consistency... :) Do I need to change only one of them? — user2511599
– user2511599, Commented Jul 16, 2019 at 7:43
@Bizley thank you, it seems to work, at least with bootstrap.css. Whether I have to do with bootstrap.min.css something I'm not sure. — user2511599
– user2511599, Commented Jul 16, 2019 at 8:18
*.min is minified version so it should be included instead of normal version (usually in production environment; never both version at the same time) but your line will override the property no matter if main is minified or not. How you write if ("minified" or not) doesn't really matter here. — Bizley
– Bizley, Commented Jul 16, 2019 at 8:50

Josep Vidal · Accepted Answer · 2019-07-18 10:54:46Z

2

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.

edited Jul 18, 2019 at 10:54

answered Jul 18, 2019 at 7:58

Josep Vidal

2,7012 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Yii2 override bootstrap.css / bootstrap.min.css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related