Example

$this->widget('bootstrap.widgets.TbButton',array(
	'label' => 'Primary',
	'type' => 'primary',
	'size' => 'large'
));
$this->widget('bootstrap.widgets.TbButton',array(
	'label' => 'Secondary',
	'size' => 'large'
));
	

Options

You can use different type of sizes by setting its size attribute to large, small, or mini.

Examples

Two basic options, along with two more specific variations.

Single button group

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
	    array('label'=>'Left', 'url'=>'#'),
	    array('label'=>'Middel', 'url'=>'#'),
	    array('label'=>'Right', 'url'=>'#')
    ),
));
	

Multiple button groups

<div class="btn-toolbar">
  <?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'1', 'url'=>'#'),
       array('label'=>'2', 'url'=>'#'),
       array('label'=>'3', 'url'=>'#'),
       array('label'=>'4', 'url'=>'#'),
    ),
)); ?>
<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'5', 'url'=>'#'),
       array('label'=>'6', 'url'=>'#'),
       array('label'=>'7', 'url'=>'#'),
    ),
)); ?>
<?php $this->widget('bootstrap.widgets.TbButtonGroup', array(
    'buttons'=>array(
       array('label'=>'8', 'url'=>'#'),
    ),
)); ?>
</div>
	

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'stacked'=>true,
    'buttons'=>array(
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-left'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-center'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-right'),
       array('buttonType'=>'button', 'url'=>'#', 'icon'=>'align-justify'),
    ),
));
	

Checkbox or radio button groups

In order to display one or the other, configure its toggle attribute.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'type' => 'primary',
    'toggle' => 'radio',
    'buttons' => array(
       array('label'=>'Left'),
       array('label'=>'Middle'),
       array('label'=>'Right'),
    ),
));
	

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
	'size'=>'large',
    'type'=>'inverse', // '', 'primary', 'info', 'success', 'warning', 'danger' or 'inverse'
    'buttons'=>array(
       array('label'=>'Inverse', 'items'=>array(
       array('label'=>'Action', 'url'=>'#'),
       array('label'=>'Another action', 'url'=>'#'),
       array('label'=>'Something else', 'url'=>'#'),
       '---',
       array('label'=>'Separate link', 'url'=>'#'),
    )),
    ),
));
	

Works with all button sizes

Button dropdowns work at any size: 'size'=>'large', 'size'=>'small', or 'size'=>'mini'.

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
	'type' => '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' => '#'),
		)),
	),
));
	

Sizes

Utilize the size property mini, small, or large for sizing.

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the htmlOptions attribute.

$this->widget('bootstrap.widgets.TbButtonGroup', array(
    'htmlOptions' => array('class'=>'dropup'),  // easy stuff
    'buttons' => array(
	    array('label' => 'Action', 'url' => '#'),
	    array('items' => array(
		    array('label' => 'Action', 'url' => '#'),
		    array('label' => 'Another action', 'url' => '#'),
		    array('label' => 'Something else', 'url' => '#'),
		    '---',
		    array('label' => 'Separate link', 'url' => '#'),
	    )),
    ),
));
	

Basic Box

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

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

Advanced Content

We can also wrap up content differently.

<?php $box = $this->beginWidget('bootstrap.widgets.TbBox', array(
	'title' => 'Advanced Box',
	'headerIcon' => 'icon-th-list',
	// when displaying a table, if we include bootstra-widget-table class
	// the table will be 0-padding to the box
	'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>1</td><td>Mark</td><td>Otto</td><td>CSS</td><td>10</td>
		</tr>
		<tr class="even">
		<td>2</td><td>Jacob</td><td>Thornton</td><td>JavaScript</td><td>20</td>
		</tr>
		<tr class="odd">
		<td>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 box, 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 boxes

$this->widget('bootstrap.widgets.TbBox', array(
'title' => 'test',
'headerIcon' => 'icon-home',
'headerButtons' => array(
	array(
		'class' => 'bootstrap.widgets.TbButtonGroup',
		'type' => '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' => 'bootstrap.widgets.TbButtonGroup',
		'buttons'=>array(
			array('label'=>'Left', 'url'=>'#'),
			array('label'=>'Middel', 'url'=>'#'),
			array('label'=>'Right', 'url'=>'#')
		),
	),
)));

Lightweight defaults

Create tabs with easy.

Basic tabs

You can change the position of the tabs by setting its placement property: above, right, bellow, or left

$this->widget('bootstrap.widgets.TbTabs', array(
	'type'=>'tabs', // 'tabs' or 'pills'
	'tabs'=>array(
		array('label'=>'Home', 'content'=>'Home Content', 'active'=>true),
		array('label'=>'Profile', 'content'=>'Profile Content'),
		array('label'=>'Messages', 'content'=>'Messages Content'),
	),
));
	

Basic pills

Just change its type property to pills instead:

$this->widget('bootstrap.widgets.TbTabs', array(
	'type'=>'pills',
	'tabs'=>array(
		array('label'=>'Home', 'content'=>'Home Content', 'active'=>true),
		array('label'=>'Profile', 'content'=>'Profile Content'),
		array('label'=>'Messages', 'content'=>'Messages Content'),
	),
));
	

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.

$this->widget('bootstrap.widgets.TbTabs', array(
	'type'=>'pills',
	'tabs'=>array(
		array('label'=>'Home', 'content'=>'Home Content'),
		array('label'=>'Profile', 'content'=>'Profile Content'),
		array('label'=>'Messages',
			'content'=>'Messages Content',
			'itemOptions'=>array('class'=>'disabled')),
	),
));
	

Component alignment

To align nav links, use the bootstrap .pull-left or .pull-right utility classes on its htmlOptions attribute. Both classes will add a CSS float in the specified direction.

Stackable

As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

Stacked tabs

$this->widget('bootstrap.widgets.TbTabs', array(
	'type'=>'tabs',
	'stacked'=>true,
	'tabs'=>array(
		array('label'=>'Home', 'content'=>'Home Content', 'active'=>true),
		array('label'=>'Profile', 'content'=>'Profile Content'),
		array('label'=>'Messages', 'content'=>'Messages Content'),
	),
));
	

Stacked pills

$this->widget('bootstrap.widgets.TbTabs', array(
	'type'=>'pills',
	'stacked'=>true,
	'tabs'=>array(
		array('label'=>'Home', 'content'=>'Home Content', 'active'=>true),
		array('label'=>'Profile', 'content'=>'Profile Content'),
		array('label'=>'Messages', 'content'=>'Messages Content'),
	),
));
	

Dropdowns

Tabs with dropdowns

$this->widget('bootstrap.widgets.TbTabs', array(
	'type' => 'tabs',
	'tabs' => array(
		array('label' => 'Home', 'content' => 'Home Content', 'active' => true),
		array('label' => 'Profile', 'content' => 'Profile Content'),
		array('label' => 'DropDown', 'items' => array(
			array('label' => 'Item1', 'content' => 'Item1 Content'),
			array('label' => 'Item2', 'content' => 'Item2 Content')
		)),
	))
);
	

Pills with dropdowns

$this->widget('bootstrap.widgets.TbTabs', array(
	'type' => 'pills',
	'tabs' => array(
		array('label' => 'Home', 'content' => 'Home Content', 'active' => true),
		array('label' => 'Profile', 'content' => 'Profile Content'),
		array('label' => 'DropDown', 'items' => array(
			array('label' => 'Item1', 'content' => 'Item1 Content'),
			array('label' => 'Item2', 'content' => 'Item2 Content')
		)),
	))
);

Nav lists

A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

Example nav list

Create a TbMenu widget and set its type to list:

$this->widget('bootstrap.widgets.TbMenu', array(
    'type'=>'list',
    'items' => array(
	    array('label'=>'List header', 'itemOptions'=>array('class'=>'nav-header')),
	    array('label'=>'Home', 'url'=>'#', 'itemOptions'=>array('class'=>'active')),
	    array('label'=>'Library', 'url'=>'#'),
	    array('label'=>'Applications', 'url'=>'#'),
	    array('label'=>'Another list header', 'itemOptions'=>array('class'=>'nav-header')),
	    array('label'=>'Profile', 'url'=>'#'),
	    array('label'=>'Settings', 'url'=>'#'),
	    '',
	    array('label'=>'Help', 'url'=>'#'),
    )
));
	

Horizontal dividers

Add a horizontal divider by creating an empty list item in the items array.

Basic navbar

$this->widget('bootstrap.widgets.TbNavbar', array(
	'brand' => 'Title',
	'items' => array(
		array(
			'class' => 'bootstrap.widgets.TbMenu',
			'items' => array(
				array('label'=>'Home', 'url'=>'#', 'active'=>true),
				array('label'=>'Link', 'url'=>'#'),
				array('label'=>'Link', 'url'=>'#'),
			)
		)
	)
));
	

Forms

TbNavbar allows you to include HTML text too, so to include forms in the navigation bar is quite an easy task.

$this->widget('bootstrap.widgets.TbNavbar', array(
    'brand' => 'Title',
    'fixed' => false,
    'items' => array(
        '<form class="navbar-form pull-left">
        <input type="text" class="span2">
        <button type="submit" class="btn">Submit</button>
        </form>'
    )
));
	

Search form

Check this alternative search form.

$this->widget('bootstrap.widgets.TbNavbar', array(
    'brand' => 'Title',
    'fixed' => false,
    'items' => array(
        '<form class="navbar-search pull-left">
        <input type="text" class="search-query" placeholder="search">
        <button type="submit" class="btn">Submit</button>
        </form>'
    )
));	

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Using dropdowns

$this->widget('bootstrap.widgets.TbNavbar', array(
	'brand' => 'Title',
	'items' => array(
		array(
			'class' => 'bootstrap.widgets.TbMenu',
			'items' => array(
				array('label'=>'Home', 'url'=>'#', 'active'=>true),
				array('label'=>'Link', 'url'=>'#'),
				array('label'=>'Dropdown', 'items'=> array(
				     array('label'=>'Item1', 'url'=>'#')
				)),
			)
		)
	)
));
	

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

Optional display variations

Fix the navbar to the top or bottom of the viewport by seeting property fixed.

Fixed to top

Add 'fixed'=>'top' to position the navigration bar to the top.

$this->widget('bootstrap.widgets.TbNavbar', array(
	'brand' => 'Title',
	'brandOptions' => array('style'=>'width:auto;margin-left: 0px;'),
	'fixed' => 'top',
	'htmlOptions' => array('style' => 'position:absolute'),
	'items' => array(
		array(
			'class' => 'bootstrap.widgets.TbMenu',
			'items' => array(
				array('label' => 'Home', 'url' => '#', 'active' => true),
				array('label' => 'Link', 'url' => '#'),
				array('label' => 'Link', 'url' => '#'),
			)
		)
	)
));	

Fixed to bottom

Add 'fixed'=>'bottom' instead.

...
'fixed' => 'bottom',
...
	

Static top navbar

Setting the property fixed to false will make the navbar static..

Responsive navbar

To implement a collapsing responsive navbar, just set the collapse property to true.

$this->widget('bootstrap.widgets.TbNavbar', array(
	'type'=>null, // null or 'inverse'
	'brand'=>'Project name',
	'brandUrl'=>'#',
	'collapse'=>true, // requires bootstrap-responsive.css
	'items'=>array(
		array(
			'class'=>'bootstrap.widgets.TbMenu',
			'items'=>array(
				array('label'=>'Home', 'url'=>'#', 'active'=>true),
				array('label'=>'Link', 'url'=>'#'),
				array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
					array('label'=>'Action', 'url'=>'#'),
					array('label'=>'Another action', 'url'=>'#'),
					array('label'=>'Something else here', 'url'=>'#'),
					'---',
					array('label'=>'NAV HEADER'),
					array('label'=>'Separated link', 'url'=>'#'),
					array('label'=>'One more separated link', 'url'=>'#'),
				)),
			),
		),
		'<form class="navbar-search pull-left" action=""><input type="text" class="search-query span2" placeholder="Search"></form>',
		array(
			'class'=>'bootstrap.widgets.TbMenu',
			'htmlOptions'=>array('class'=>'pull-right'),
			'items'=>array(
				array('label'=>'Link', 'url'=>'#'),
				'---',
				array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
					array('label'=>'Action', 'url'=>'#'),
					array('label'=>'Another action', 'url'=>'#'),
					array('label'=>'Something else here', 'url'=>'#'),
					'---',
					array('label'=>'Separated link', 'url'=>'#'),
				)),
			),
		),
	),
));
	

Inverted variation

Modify the look of the navbar by setting it type property to inverse.

...
'type' => 'inverse'
...
	

Examples

A single example shown as it might be displayed across multiple pages.

$this->widget('bootstrap.widgets.TbBreadcrumbs', array(
    'links'=>array('Library'=>'#', 'Data'),
));

Labels

$this->widget('bootstrap.widgets.TbLabel', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'Success',
));
 

Badges

$this->widget('bootstrap.widgets.TbBadge', array(
     'type'=>'success', // 'success', 'warning', 'important', 'info' or 'inverse'
     'label'=>'2',
));
 

Hero unit

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

<?php $this->beginWidget('bootstrap.widgets.TbHeroUnit', array(
	'heading'=>'Hello, world!',
)); ?>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p>
	<?php $this->widget('bootstrap.widgets.TbButton', array(
    'type'=>'primary',
    'size'=>'large',
    'label'=>'Learn more',
)); ?>
</p>

<?php $this->endWidget(); ?>

Page header

Not part of any widget but worth to know: A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).

	<div class="page-header">
	  <h1>Example page header <small>Subtext for header</small></h1>
	</div>
	

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

$this->widget('bootstrap.widgets.TbThumbnails', array(
	'dataProvider'=>$thumbDataProvider,
	'template'=>"{items}\n{pager}",
	'itemView'=>'_thumb',
));
	

Default alert

Yii::app()->user->setFlash('success', '<strong>Well done!</strong> You successfully read this important alert message.');
$this->widget('bootstrap.widgets.TbAlert', array(
    'block'=>true, // display a larger alert block?
    'fade'=>true, // use transitions?
    'closeText'=>'×', // close link text - if set to false, no close link is displayed
    'alerts'=>array( // configurations per alert type
	    'success'=>array('block'=>true, 'fade'=>true, 'closeText'=>'×'), // success, info, warning, error or danger
    ),
));
	

Examples

Basic

Default progress bar with a vertical gradient.

$this->widget('bootstrap.widgets.TbProgress', array(
    'type'=>'success', // 'info', 'success' or 'danger'
    'percent'=>60,
));
	

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

$this->widget('bootstrap.widgets.TbProgress', array(
    'type'=>'success', // 'info', 'success' or 'danger'
    'percent'=>60,
	'stripped'=>true
));
	

Animated

Set animated to true to animate the stripes right to left. Not available in all versions of IE.

$this->widget('bootstrap.widgets.TbProgress', array(
    'percent'=>40, // the progress
    'striped'=>true,
    'animated'=>true,
));
	

Stacked

Place multiple bars into the same .progress to stack them.

$this->widget('bootstrap.widgets.TbProgress', array(
    'stacked'=>array(
	    array('type'=>'success', 'percent'=>30, 'htmlOptions'=>array('title'=>'Hey! I am a title here.')),
	    array('type'=>'warning', 'percent'=>35),
	    array('type'=>'danger', 'percent'=>30),
)));
	

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Detail Views

Basic Stuff

$this->widget('bootstrap.widgets.TbDetailView', array(
    'data'=>array('id'=>1, 'firstName'=>'Mark', 'lastName'=>'Otto', 'language'=>'CSS'),
    'attributes'=>array(
	    array('name'=>'firstName', 'label'=>'First name'),
	    array('name'=>'lastName', 'label'=>'Last name'),
	    array('name'=>'language', 'label'=>'Language'),
    ),
));
	

Grid Views

In order to test the Grid Views we make use of the following data:

// $gridDataProvider
$mark = new Person();
$mark->id = 1;
$mark->firstName = 'Mark';
$mark->lastName = 'Otto';
$mark->language = 'CSS';
$mark->hours = 10;

$jacob = new Person();
$jacob->id = 2;
$jacob->firstName = 'Jacob';
$jacob->lastName = 'Thornton';
$jacob->language = 'JavaScript';
$jacob->hours = 20;

$stu = new Person();
$stu->id = 3;
$stu->firstName = 'Stu';
$stu->lastName = 'Dent';
$stu->language = 'HTML';
$stu->hours = 10;

$persons = array($mark, $jacob, $stu);

$gridDataProvider = new CArrayDataProvider($persons);

// $gridColumns
$gridColumns = array(
	array('name'=>'id', 'header'=>'#', 'htmlOptions'=>array('style'=>'width: 60px')),
	array('name'=>'firstName', 'header'=>'First name'),
	array('name'=>'lastName', 'header'=>'Last name'),
	array('name'=>'language', 'header'=>'Language'),
	array('name'=>'hours', 'header'=>'Hours worked'),
	array(
		'htmlOptions' => array('nowrap'=>'nowrap'),
		'class'=>'bootstrap.widgets.TbButtonColumn',
		'viewButtonUrl'=>null,
		'updateButtonUrl'=>null,
		'deleteButtonUrl'=>null,
	)
);

Default

$this->widget('bootstrap.widgets.TbGridView', array(
	'dataProvider'=>$gridDataProvider,
	'template'=>"{items}",
	'columns'=>$gridColumns,
));

Striped

this->widget('bootstrap.widgets.TbGridView', array(
	'type'=>'striped',
	'dataProvider'=>$gridDataProvider,
	'template'=>"{items}",
	'columns'=>$gridColumns,
));

Bordered

$this->widget('bootstrap.widgets.TbGridView', array(
	'type'=>'bordered',
	'dataProvider'=>$gridDataProvider,
	'template'=>"{items}",
	'columns'=>$gridColumns,
));

Condensed

$this->widget('bootstrap.widgets.TbGridView', array(
	'type'=>'condensed',
	'dataProvider'=>$gridDataProvider,
	'template'=>"{items}",
	'columns'=>$gridColumns,
));

Striped, bordered and condensed

$this->widget('bootstrap.widgets.TbGridView', array(
	'type'=>'striped bordered condensed',
	'dataProvider'=>$gridDataProvider,
	'template'=>"{items}",
	'filter'=>$person->search(),
	'columns'=>$gridColumns,
));

Vertical

Use the well as a simple effect on an element to give it an inset effect.

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'id'=>'verticalForm',
    'htmlOptions'=>array('class'=>'well'),
)); ?>

<?php echo $form->textFieldRow($model, 'textField', array('class'=>'span3')); ?>
<?php echo $form->passwordFieldRow($model, 'password', array('class'=>'span3')); ?>
<?php echo $form->checkboxRow($model, 'checkbox'); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Login')); ?>

<?php $this->endWidget(); ?>

Search Form

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
	'id'=>'searchForm',
	'type'=>'search',
	'htmlOptions'=>array('class'=>'well'),
)); ?>
<?php
	echo $form->textFieldRow($model, 'textField',
		array('class'=>'input-medium', 'prepend'=>'<i class="icon-search"></i>'));
?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Go')); ?>

<?php $this->endWidget(); ?>
	

Inline Form

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
	'id'=>'inlineForm',
	'type'=>'inline',
	'htmlOptions'=>array('class'=>'well'),
)); ?>

<?php echo $form->textFieldRow($model, 'textField', array('class'=>'input-small')); ?>
<?php echo $form->passwordFieldRow($model, 'password', array('class'=>'input-small')); ?>
<?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'label'=>'Log in')); ?>

<?php $this->endWidget(); ?>
	

Horizontal

<?php /** @var BootActiveForm $form */
	$form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
		'id'=>'horizontalForm',
		'type'=>'horizontal',
	)); ?>

    <fieldset>

        <legend>Legend</legend>

        <?php echo $form->textFieldRow($model, 'textField',
        array('hint'=>'In addition to freeform text, any HTML5 text-based input appears like so.')); ?>
        <?php echo $form->datepickerRow($model, 'dateField',
        array('hint'=>'Click inside! This is a super cool date field.',
        'prepend'=>'<i class="icon-calendar"></i>')); ?>
        <?php echo $form->dateRangeRow($model, 'dateRangeField',
        array('hint'=>'Click inside! An even a date range field!.',
        'prepend'=>'<i class="icon-calendar">>/i>',
        'options' => array('callback'=>'js:function(start, end){console.log(start.toString("MMMM d, yyyy") + " - " + end.toString("MMMM d, yyyy"));}')
        )); ?>
		<?php echo $form->timepickerRow($model, 'timepicker', array('hint'=>'Nice bootstrap time picker', 'append'=>'<i class="icon-time" style="cursor:pointer"></i>'));?>
        <?php echo $form->dropDownListRow($model, 'dropdown',
        array('Something ...', '1', '2', '3', '4', '5')); ?>
        <?php echo $form->dropDownListRow($model, 'multiDropdown',
        array('1', '2', '3', '4', '5'), array('multiple'=>true)); ?>
        <?php echo $form->select2Row($model, 'select2', array('asDropDownList' => false, 'options' => array(
        'tags' => array('clever','is', 'better', 'clevertech'),
        'placeholder' => 'type clever, or is, or just type!',
        'width' => '40%',
        'tokenSeparators' => array(',', ' ')
        )));?>
        <?php echo $form->fileFieldRow($model, 'fileField'); ?>
        <?php echo $form->textAreaRow($model, 'textarea', array('class'=>'span8', 'rows'=>5)); ?>
        <?php echo $form->redactorRow($model, 'redactor', array('class'=>'span4', 'rows'=>5)); ?>
        <?php echo $form->html5EditorRow($model, 'wysihtml5', array('class'=>'span4', 'rows'=>5, 'height'=>'200', 'options'=>array('color'=>true))); ?>
		<?php echo $form->ckEditorRow($model, 'ckeditor', array('options'=>array('fullpage'=>'js:true', 'width'=>'640', 'resize_maxWidth'=>'640','resize_minWidth'=>'320')));?>
		<?php echo $form->markdownEditorRow($model, 'markdown', array('height'=>'200px'));?>
        <?php echo $form->toggleButtonRow($model, 'toggle'); ?>
        <?php echo $form->uneditableRow($model, 'uneditable'); ?>
        <?php echo $form->textFieldRow($model, 'disabled', array('disabled'=>true)); ?>
        <?php echo $form->textFieldRow($model, 'prepend', array('prepend'=>'@')); ?>
        <?php echo $form->textFieldRow($model, 'append', array('append'=>'.00')); ?>
        <?php echo $form->checkBoxRow($model, 'disabledCheckbox', array('disabled'=>true)); ?>
        <?php echo $form->checkBoxListInlineRow($model, 'inlineCheckboxes', array('1', '2', '3')); ?>
        <?php echo $form->checkBoxListRow($model, 'checkboxes', array(
		'Option one is this and that—be sure to include why it\'s great',
		'Option two can also be checked and included in form results',
		'Option three can—yes, you guessed it—also be checked and included in form results',
	), array('hint'=>'<strong>Note:</strong> Labels surround all the options for much larger click areas.')); ?>
        <?php echo $form->radioButtonRow($model, 'radioButton'); ?>
        <?php echo $form->radioButtonListRow($model, 'radioButtons', array(
		'Option one is this and that—be sure to include why it\'s great',
		'Option two can is something else and selecting it will deselect option one',
	)); ?>

    </fieldset>

    <div class="form-actions">
        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'submit', 'type'=>'primary', 'label'=>'Submit')); ?>
        <?php $this->widget('bootstrap.widgets.TbButton', array('buttonType'=>'reset', 'label'=>'Reset')); ?>
    </div>

<?php $this->endWidget(); ?>

We have included the Select2 on roids plugin of Igor Vaynberg. The following is a simple example of the amount of possible features that this plugin can do. For further information on its use, please visit plugin docs.

$this->widget('bootstrap.widgets.TbSelect2', array(
	'asDropDownList' => false,
	'name' => 'clevertech',
	'options' => array(
		'tags' => array('clever','is', 'better', 'clevertech'),
		'placeholder' => 'disciplines',
		'width' => '40%',
		'tokenSeparators' => array(',', ' ')
)));	

The amazing work from Vitaliy Potapov, X-Editable, is also part of YiiBooster thanks to the generosity of its author.

Note: For a deeper understanding of the possibilities and configuration options of this widget, we highly recommend that you visit its demo page.

Important Note: If you still using the old JEditable widgets from previous versions of YiiBooster, please consider migrating to new TbEditable family of widgets as JEditable is not supported anymore.

TbEditableField

Makes editable single attribute of model.

Note: Attribute should be safe (e.g. defined in rules() method of model).

It can be one of several types:

1. Text

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'text',
   'model'     => $model,
   'attribute' => 'textField',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
));
	

2. TextArea

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'textarea',
   'model'     => $model,
   'attribute' => 'textArea',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'placement' => 'right',
));
	

3. Select

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'select',
   'model'     => $model,
   'attribute' => 'dropDown',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'source'    => array('Antonio', 'Ramirez', 'Cobos', 'Works', 'At', 'Clevertech'),
));	

4. Date

$this->widget('ext.editable.TbEditableField', array(
   'type'      => 'date',
   'model'     => $model,
   'attribute' => 'dateField',
   'url'       => $this->createUrl('site/editable'),  //url for submit data
   'format' => 'dd-mm-yyyy',
   'viewformat'  => 'dd/mm/yyyy',
   'placement'    => 'right',
));	

TbEditableDetailView

Makes editable several attributes of single model, shown as name-value table. Just define editable section inside attribute config. Only safe attributes become editable.

For more information: please visit EditableDetailView

$this->widget('bootstrap.widgets.TbEditableDetailView', array(
    'id' => 'region-details',
    'data' => Region::model()->findByPk(1),
    'url' => $this->createUrl('site/editable'),  //common submit url for all editables
    'attributes'=>array(
	    'country_code',
	    'name',
    )
));

TbEditableColumn

This is the EditableColumn widget from Vitaliy Potapov.

$this->widget('bootstrap.widgets.TbGridView', array(
	'type' => 'striped bordered',
	'dataProvider' => new CActiveDataProvider('Region',array(
		'criteria'=>array('condition'=>'id < 5'))
	),
	'template' => "{items}",
	'columns' => array(
		'country_code',
		array(
			'class' => 'bootstrap.widgets.TbEditableColumn',
			'name' => 'name',
			'sortable'=>false,
			'editable' => array(
				'url' => $this->createUrl('site/editable'),
				'placement' => 'right',
				'inputclass' => 'span3'
			)
		)),
));

Wells

Use the well as a simple effect on an element to give it an inset effect.

	<div class="well">
	  ...
	</div>
	

Optional classes

Control padding and rounded corners with two optional modifier classes.

	<div class="well well-large">
	  ...
	</div>
	

	<div class="well well-small">
	  ...
	</div>
	

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

<a class="close" href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

	class="pull-left"
	

	.pull-left {
	  float: left;
	}
	

.pull-right

Float an element right

	class="pull-right"
	

	.pull-right {
	  float: right;
	}
	

.muted

Change an element's color to #999

	class="muted"
	

	.muted {
	  color: #999;
	}
	

.clearfix

Clear the float on any element

	class="clearfix"
	

	.clearfix {
	  *zoom: 1;
	  &:before,
	  &:after {
	    display: table;
	    content: "";
	  }
	  &:after {
	    clear: both;
	  }
	}
	

Create a wizard using the same settings and configuration as the Tabs component with minor additions to actually build a wizard.

Basic Wizard

$this->widget('bootstrap.widgets.TbWizard', array(
	'type' => 'tabs', // 'tabs' or 'pills'
	'tabs' => array(
		array('label' => 'Home', 'content' => 'Home Content', 'active' => true),
		array('label' => 'Profile', 'content' => 'Profile Content'),
		array('label' => 'Messages', 'content' => 'Messages Content'),
	),
));
	

As described above same configuration as the tabs widget apply to the wizard widget with the following additions:

Wizard has 8 different events that it fires when certain actions are performed. onInit, onShow, onNext, onPrevious, onFirst, onLast, onTabShow, onTabClick

Example usage with events callbacks

$this->widget('bootstrap.widgets.TbWizard', array(
	'type' => 'tabs', // 'tabs' or 'pills'
	'options' => array(
		'onTabShow' => 'js:function(tab, navigation, index) { if((index+1) > 1) {alert("Tab #" + (index+1));} }',
		'onTabClick' => 'js:function(tab, navigation, index) {alert("Tab Click Disabled");return false;}',
	),
	'tabs' => array(
		array('label' => 'Home', 'content' => 'Home Content', 'active' => true),
		array('label' => 'Profile', 'content' => 'Profile Content'),
		array('label' => 'Messages', 'content' => 'Messages Content'),
	),
));
	

Custom Next, Previous, First, Last Buttons & Progress Bar

$this->widget('bootstrap.widgets.TbWizard', array(
	'type' => 'tabs', // 'tabs' or 'pills'
	'pagerContent' => '<div style="float:right">
		<input type="button" class="btn button-next" name="next" value="Next" />
		<input type="button" class="btn button-last" name="last" value="Last" />
		</div>
		<div style="float:left">
			<input type="button" class="btn button-first" name="first" value="First" />
			<input type="button" class="btn button-previous" name="previous" value="Previous" />
		</div><br /><br />',
	'options' => array(
		'nextSelector' => '.button-next',
		'previousSelector' => '.button-previous',
		'firstSelector' => '.button-first',
		'lastSelector' => '.button-last',	
		'onTabShow' => 'js:function(tab, navigation, index) {
			var $total = navigation.find("li").length;
			var $current = index+1;
			var $percent = ($current/$total) * 100;
			$("#wizard-bar > .bar").css({width:$percent+"%"});
		}',
		'onTabClick' => 'js:function(tab, navigation, index) {
			alert("Tab Click Disabled");return false;
		}',
	),
	'tabs' => array(
		array('label' => 'Home', 'content' => 'Home Content', 'active' => true),
		array('label' => 'Profile', 'content' => 'Profile Content'),
		array('label' => 'Messages', 'content' => 'Messages Content'),
	),
));