Use Yii 2.0 (Widgets) Without Bootstrap

Yii 2.0 General Discussions
1

Hi,

I would like to interest about how I can use the Yii 2.0 without the Bootstrap?

I tried it, but the CGridView and other widgets always need the Bootstrap, but I would like to use another theme for it.

Is this possible?

2

If you carefully noticed, the yii widgets that use 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']

            ],

        ],

    ],

],

For other Yii widgets that are not part of an inbuilt 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. For example, for your question on GridView, you can easily override Bootstrap or other styling defaults by changing the following default options.

The simpler direct approach for you would be to override defaults for Yii’s classes in your Yii index.php or in Yii config - something like




\Yii::$objectConfig = [

    'yii\grid\GridView' => [

        'tableOptions' => [

            'class' => 'table table-striped table-bordered',

        ],

    ],

    'yii\widgets\LinkPager' => [

        'options' => [

            'class' => 'pagination',

        ],

    ],

];

Or, you can create custom classes extending Yii’s inbuilt ones so you can use them across your app.




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:




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 = [];

}
3

I think we should add your post into wiki. That is so useful. Thanks for sharing!

4

No problem, I just created a wiki for this, which can be extended with others’ inputs.