custom bootstrap css for YII2 frontend

Question

how can I use a custom CSS (obtained from a bootstrap HTML template) with yii2 framework frontend? (i'm using Yii advanced template)

things i tried and that didn't work:

adding the path to the custom css file in frontend\assets\AppAsset.php
replaced the bootstrap-theme.css file under frontend\web\assets\e4f17951\css\
modified the frontend\config\main.php according to this tutorial

EDIT:

following the tutorial , i added this to main-local.php:

'assetManager' => [
    'bundles' => [
        'yii\bootstrap\BootstrapAsset' => [
             'sourcePath' => 'frontend/web',
             'css' => ['css/bootstrap.css', 'css/agency.css']
            ],
        ],
    ],

maybe something wrong with sourcePath?

any help will be much appreciated.

Please add details about why it didn't work (only for third) — soju
– soju, Commented Apr 30, 2015 at 20:28

topher · Accepted Answer · 2015-04-30 20:40:54Z

12

You can edit your frontend web config file to point to your custom bootstrap.css. Note that the path is relative.

'assetManager' => [
    'bundles' => [
        'yii\bootstrap\BootstrapAsset' => [
            'css' => [
                'bootstrap.css' => 'path/to/your/bootstrap.css'
            ]
        ]
    ]
],

answered Apr 30, 2015 at 20:40

topher

14.9k8 gold badges56 silver badges71 bronze badges

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

1 Comment

Asma_15 Over a year ago

the bootstrap html template has the same bootstrap.css file than the YII app. and the second file, 'agency.css' ,is the custom is the one i need, in top of the "original' bootstrap file. PS: sorry for my english .

leninhasda · Accepted Answer · 2016-04-22 14:14:20Z

4

you can actually edit the AppAsset.php file

<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
 * Main frontend application asset bundle.
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        // add your bootstrap or any other css file path
        // example
        'css/bootstrap.css',
        'css/agency.css',
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        // 'yii\bootstrap\BootstrapAsset', remove / comment this
        // as you don't want to use default bootstrap
    ];
}

it should solve your issue

answered Apr 22, 2016 at 14:14

leninhasda

1,76012 silver badges21 bronze badges

1 Comment

Alexander Ronin Over a year ago

This is a bad idea because conflicts will arise that are not noticeable at first glance. For example, with the “Alert” widget out of the box. This will override the styles after reboot. So it's better to set your own Bootstrap styles in the assetsManager configuration. So, the best way to do this is described here: github.com/yiisoft/yii2-bootstrap5/blob/master/docs/guide/…

Collectives™ on Stack Overflow

custom bootstrap css for YII2 frontend

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related