Yii 2.0: Override/Eliminate Bootstrap CSS/JS for Yii 2.0 widgets


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' => [
        'bundles' => [
            'yii\bootstrap\BootstrapAsset' => [
                 'sourcePath' => 'your-path',
                 'css' => ['css/bootstrap.css', 'path/to/custom.css']

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 class configuration. You may use \Yii::$container->set 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', [
    'tableOptions' => [
        'class' => 'table table-striped table-bordered',
// Set LinkPager defaults
\Yii::$container->set('yii\widgets\LinkPager', [
    'options' => [
        'class' => 'pagination',

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 
    // change the following line
    public $tableOptions = ['class' => 'table table-striped table-bordered'];
    // override styling of your data columns
    public $dataColumnClass = 'frontend\widgets\MyDataColumn';
    // override styling of your pager
    public $pager = [
        'options' => ['class' => 'pagination'],
        'firstPageCssClass' => 'first',
        'lastPageCssClass' => 'last',
        'prevPageCssClass' => 'prev',
        'nextPageCssClass' => 'next',
        'activePageCssClass' => 'active',
        'disabledPageCssClass' => 'disabled'
    // override styling of your sorter
    public $sorter = ['options' => ['class' => 'sorter']];
    // override other styles through these options
    public $options = ['class' => 'grid-view'];
    public $headerRowOptions = [];
    public $footerRowOptions = [];
    public $rowOptions = [];

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];
    // customize by changing your styles
    public $sortLinkOptions = [];

Total 2 comments

#16931 report it
Kartik V at 2014/04/14 07:34am
Updated wiki for Yii object configuration

The wiki is updated for the change in which you can configure Yii objects globally.

#16922 report it
CeBe at 2014/04/14 01:55am
There is no \Yii::$objectConfig anymore

use \Yii::$container->set() instead.


Leave a comment

Please to leave your comment.

Write new article