Css And Bootstrap In Yii2

I'm quite new to Yii2 and I have created a layout page, but my CSS doesn't work fully. It only loads parts of it. Can somebody help me please? My layout:

Solution 1:

AssetBundle represents a collection of asset files, such as CSS, JS, etc.

An asset bundle can depend on other asset bundles. When registering an asset bundle with a view, all its dependent asset bundles will be automatically registered.

please refer below link

Yii2 AssetBundle API DOC

AssetBundle Example

First create one ThemeAsset AssetBundule.

<?phpnamespaceapp\assets;
    useyii\web\AssetBundle;

    classThemeAssetextendsAssetBundle{
        public$basePath = '@webroot';
        public$baseUrl = '@web';
        public$css = [
             '/themes/dcu/assets/css/bootstrap.css',
             '/themes/dcu/assets/css/bootstrap-responsive.min.css',
             '/themes/dcu/assets/css/gbu.css',
             '/themes/dcu/assets/css/font-awesome.css',
        ];
        public$js = [      
             .... 
             js file here
             .... 
        ];
        public$jsOptions = [
             ....
             js options here
             ....
        ];
        public$depends = [
             ....
             dependent asset bundles here
             eg: 'yii\bootstrap\BootstrapAsset'
             ....
        ];
    }
?>

Now register the ThemeAsset in your view file

<?phpuseapp\assets\ThemeAsset;
   ThemeAsset::register($this);
?>

Solution 2:

I would recommend creating an AssetBundle for your theme ("dcu") which requires all necessary files.

Look here for details on creating AssetBundles: Assets Key Concept and AssetBundle API doc

Solution 3:

Use registerCssFile Concept

$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
    'depends' => [BootstrapAsset::className()],
    'media' => 'print',
], 'css-print-theme');

Share