Difference between #4 and #6 of
Override/Eliminate Bootstrap CSS/JS for Yii 2.0 widgets


Title unchanged

Override/Eliminate Bootstrap CSS/JS for Yii 2.0 widgets

Category unchanged


Yii version changed


Tags changed

yii 2, Widgets, bootstrap, style, customize, theme,style,bootstrap,yii 2

Content changed

## Bootstrap Extension Widgets In Yii 2.0, the yii widgets that use Twitter Bootstrap CSS & JS directly, are part of the **yii2-bootstrap** extension, starting with **yii/bootstrap** namespace. For customizing bootstrap extension specific widget assets, you could configure your own assets (CSS/JS) using the new Yii Asset Manager in your Yii Config file. Something like:

'components' => [
'assetManager' => [

## Customizing Other Widgets For other Yii widgets that are not part of an inbuilt Yii extension (like bootstrap or JUI), the widget itself does not have any CSS inbuilt. Rather the widget uses Bootstrap HTML markup as default which you can override. An example of customizing the Yii GridView is mentioned here. You can easily override Bootstrap or other styling defaults by changing the GridView default options. ### Option 1: Updating object DI config The simpler direct approach for you would be to override defaults for Yii's classes in any place before using them configuration. You may use [\Yii::$container->set](http://www.yiiframework.com/doc-2.0/yii-baseyii.html#$container-detail "Yii DI Container") to set up the needed dependencies of classes and their initial property values. For global use - you can set this in your webroot index.php or the config file.

// Set GridView defaults
\Yii::$container->set('yii\grid\GridView', [

# Option 2: Extend Yii Class You can alternatively create custom classes extending Yii's inbuilt ones so you can use them across your app. For example:

namespace frontend\widgets;
class MyGridView extends \yii\grid\GridView
Your extended DataColumn can look like:


namespace frontend\widgets;
class MyDataColumn extends \yii\grid\DataColumn
// customize by changing your styles
public $filterInputOptions = ['class' => 'form-control', 'id' => null];
4 2
Viewed: 56 125 times
Version: 2.0
Category: How-tos
Written by: Kartik V
Last updated by: CeBe
Created on: Feb 27, 2014
Last updated: 6 years ago
Update Article


View all history