You use panels to wrap up elements with a nice window effect. panels is a CPorlet type widget with the beauty of Bootstrap

Basic example of usage is this:

$this->widget(
    'booster.widgets.TbPanel',
    array(
        'title' => 'Basic Box',
        'headerIcon' => 'home',
        'content' => 'My Basic Content (you can use renderPartial here too :))'
    )
);

Here's all configuration properties which you can set for TbEditableView widget.

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

$this->widget(
    'booster.widgets.TbPanel',
    array(
        'title' => 'Basic Box',
    	'context' => 'primary',
        'headerIcon' => 'home',
        'content' => 'My Basic Content (you can use renderPartial here too :))'
    )
);
$this->widget(
		'booster.widgets.TbPanel',
		array(
				'title' => 'Basic Box',
				'context' => 'success',
				'headerIcon' => 'home',
				'content' => 'My Basic Content (you can use renderPartial here too :))'
		)
);
$this->widget(
		'booster.widgets.TbPanel',
		array(
				'title' => 'Basic Box',
				'context' => 'info',
				'headerIcon' => 'home',
				'content' => 'My Basic Content (you can use renderPartial here too :))'
		)
);
$this->widget(
		'booster.widgets.TbPanel',
		array(
				'title' => 'Basic Box',
				'context' => 'warning',
				'headerIcon' => 'home',
				'content' => 'My Basic Content (you can use renderPartial here too :))'
		)
);
$this->widget(
		'booster.widgets.TbPanel',
		array(
				'title' => 'Basic Box',
				'context' => 'danger',
				'headerIcon' => 'home',
				'content' => 'My Basic Content (you can use renderPartial here too :))'
		)
);

Advanced Content

We can also wrap up content differently.

<?php $box = $this->beginWidget(
    'booster.widgets.TbPanel',
    array(
        'title' => 'Advanced Box',
        'headerIcon' => 'th-list',
    	'padContent' => false,
        'htmlOptions' => array('class' => 'bootstrap-widget-table')
    )
);?>
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Language</th>
            <th>Hours worked</th>
        </tr>
        </thead>
        <tbody>
        <tr class="odd">
            <td style="width: 60px">1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>CSS</td>
            <td>10</td>
        </tr>
        <tr class="even">
            <td style="width: 60px">2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>JavaScript</td>
            <td>20</td>
        </tr>
        <tr class="odd">
            <td style="width: 60px">3</td>
            <td>Stu</td>
            <td>Dent</td>
            <td>HTML</td>
            <td>15</td>
        </tr>
        </tbody>
    </table>
<?php $this->endWidget(); ?>

Box with Actions

You can also set actions to a panel, so they can nicely display on its right corner as a dropdown button -icon actions on the way :)

Heads Up! Now you can add any type of buttons to panels

$this->widget(
    'booster.widgets.TbPanel',
    array(
        'title' => 'test',
        'headerIcon' => 'home',
        'headerButtons' => array(
            array(
                'class' => 'booster.widgets.TbButtonGroup',
                'context' => 'primary', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
                'buttons' => array(
                    array('label' => 'Action', 'url' => '#'), // this makes it split :)
                    array(
                        'items' => array(
                            array('label' => 'Action', 'url' => '#'),
                            array('label' => 'Another action', 'url' => '#'),
                            array('label' => 'Something else', 'url' => '#'),
                            '---',
                            array('label' => 'Separate link', 'url' => '#'),
                        )
                    ),
                )
            ),
            array(
                'class' => 'booster.widgets.TbButtonGroup',
                'buttons' => array(
                    array('label' => 'Left', 'url' => '#'),
                    array('label' => 'Middle', 'url' => '#'),
                    array('label' => 'Right', 'url' => '#')
                ),
            ),
        )
    )
);