Basic tabs

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_TABS,
    'items' => array(
        array('label' => 'Home', 'url' => '#', 'active' => true),
        array('label' => 'Profile', 'url' => '#',),
        array('label' => 'Messages', 'url' => '#',),
    ),
)); ?>

Basic pills

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_PILLS,
    'items' => array(
        array('label' => 'Home', 'url' => '#', 'active' => true),
        array('label' => 'Profile', 'url' => '#',),
        array('label' => 'Messages', 'url' => '#',),
    ),
)); ?>

Disabled state

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_PILLS,
    'items' => array(
        array('label' => 'Clickable link', 'url' => '#'),
        array('label' => 'Clickable link', 'url' => '#'),
        array('label' => 'Disabled link', 'url' => '#', 'disabled' => true),
    ),
)); ?>

Stackable

Stacked tabs

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_TABS,
    'stacked' => true,
    ...
)); ?>

Stacked pills

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_PILLS,
    'stacked' => true,
    ...
)); ?>

Dropdowns

Tabs with dropdowns

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_TABS,
    'items' => array(
        ...
        array('label' => 'Dropdown', 'items' => array(
            array('label' => 'Action', 'url' => '#'),
            array('label' => 'Another action', 'url' => '#'),
            array('label' => 'Something else here', 'url' => '#'),
            TbHtml::menuDivider(),
            array('label' => 'Separate link', 'url' => '#'),
        ),
    ),
)); ?>

Pills with dropdowns

<?php $this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_PILLS,
    'items' => array(
        ...
        array('label' => 'Dropdown', 'items' => array(
            array('label' => 'Action', 'url' => '#'),
            array('label' => 'Another action', 'url' => '#'),
            array('label' => 'Something else here', 'url' => '#'),
            TbHtml::menuDivider(),
            array('label' => 'Separate link', 'url' => '#'),
        ),
    ),
)); ?>

Nav lists

$this->widget('bootstrap.widgets.TbNav', array(
    'type' => TbHtml::NAV_TYPE_LIST,
    'items' => array(
        array('label' => 'List header'),
        array('label' => 'Home', 'url' => '#', 'active' => true),
        array('label' => 'Library', 'url' => '#'),
        array('label' => 'Applications', 'url' => '#'),
        array('label' => 'Another list header'),
        array('label' => 'Profile', 'url' => '#'),
        array('label' => 'Settings', 'url' => '#'),
        TbHtml::menuDivider(),
        array('label' => 'Help', 'url' => '#'),
    )
));

Basic navbar

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    'brandLabel' => 'Title',
    'display' => null, // default is static to top
    'items' => array(
        array(
            'class' => 'bootstrap.widgets.TbNav',
            'items' => array(
                array('label' => 'Home', 'url' => '#', 'active' => true),
                array('label' => 'Link', 'url' => '#'),
                array('label' => 'Link', 'url' => '#'),
            ),
        ),
    ),
)); ?>

Search form

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    'brandLabel' => 'Title',
    'items' => array(
        TbHtml::navbarSearchForm('#'),
    ),
));

Display variations

Responsive navbar

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    'brandLabel' => 'Title',
    'collapse' => true,
    'items' => array(...),
)); ?>

Inverted variation

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
    'color' => TbHtml::NAVBAR_COLOR_INVERSE,
    'brandLabel' => 'Title',
    'collapse' => true,
    'items' => array(...),
)); ?>

<?php $this->widget('bootstrap.widgets.TbBreadcrumb', array(
    'links' => array(
        'Library' => '#',
        'Data',
    ),
)); ?>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<?php $this->widget('bootstrap.widgets.TbHeroUnit', array(
    'heading' => 'Hello, world!',
    'content' => '<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>' . TbHtml::button('Learn more', array('color' =>TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_LARGE)),
)); ?>

Using a view

Head up! You can also use a view instead of a string as content by passing the path or alias to that view as the content attribute.

#	First name	Last name	Username

1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

Displaying 1-2 of 3 results.

<?php $this->widget('bootstrap.widgets.TbGridView', array(
   'dataProvider' => $person->search(),
   'filter' => $person,
   'template' => "{items}",
   'columns' => array(
        array(
            'name' => 'id',
            'header' => '#',
            'htmlOptions' => array('color' =>'width: 60px'),
        ),
        array(
            'name' => 'firstName',
            'header' => 'First name',
        ),
        array(
            'name' => 'lastName',
            'header' => 'Last name',
        ),
        array(
            'name' => 'username',
            'header' => 'Username',
        ),
    ),
)); ?>

Optional styles

Striped

#	First name	Last name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type' => TbHtml::GRID_TYPE_STRIPED,
    ...
)); ?>

Bordered

#	First name	Last name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type' => TbHtml::GRID_TYPE_BORDERED,
    ...
)); ?>

Hover

#	First name	Last name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type' => TbHtml::GRID_TYPE_HOVER,
    ...
)); ?>

Condensed

#	First name	Last name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type' => TbHtml::GRID_TYPE_CONDENSED,
    ...
)); ?>

Heads up! You can also combine table styles by providing multiple values.

<?php $form = $this->beginWidget('bootstrap.widgets.TbActiveForm', array(
    'layout' => TbHtml::FORM_LAYOUTHORIZONTAL,
)); ?>

<fieldset>

    <legend>Legend</legend>

    <?php echo $form->textFieldControlGroup($model, 'textField',
        array('help' => 'In addition to freeform text, any HTML5 text-based input appears like so.')); ?>
    <?php echo $form->dropDownListControlGroup($model, 'dropDown',
        array('1', '2', '3', '4', '5'), array('empty' => 'Something...')); ?>
    <?php echo $form->dropDownListControlGroup($model, 'multiDropDown',
        array('1', '2', '3', '4', '5'), array('multiple' => true)); ?>
    <?php echo $form->fileFieldControlGroup($model, 'fileField'); ?>
    <?php echo $form->textAreaControlGroup($model, 'textArea',
        array('span' => 8, 'rows' => 5)); ?>
    <?php echo $form->uneditableFieldControlGroup($model, 'uneditableField'); ?>
    <?php echo $form->textFieldControlGroup($model, 'disabled', array('disabled' => true)); ?>
    <?php echo $form->textFieldControlGroup($model, 'prepend', array('prepend' => '@')); ?>
    <?php echo $form->textFieldControlGroup($model, 'append', array('append' => '.00')); ?>
    <?php echo $form->checkBoxControlGroup($model, 'disabledCheckbox', array('disabled' => true)); ?>
    <?php echo $form->inlineCheckBoxListControlGroup($model, 'inlineCheckboxes', array('1', '2', '3')); ?>
    <?php echo $form->checkBoxListControlGroup($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('help' => '<strong>Note:</strong> Labels surround all the options for much larger click areas.')); ?>
    <?php echo $form->radioButtonControlGroup($model, 'radioButton'); ?>
    <?php echo $form->radioButtonListControlGroup($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>

<?php echo TbHtml::formActions(array(
    TbHtml::submitButton('Submit', array('color' => TbHtml::BUTTON_COLOR_PRIMARY)),
    TbHtml::resetButton('Reset'),
)); ?>

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

Form builder

<?php $form = new TbForm(array(
    'layout' => TbHtml::FORM_LAYOUT_HORIZONTAL,
    'elements' => array(
        'textField' => array(
            'type' => TbHtml::INPUT_TYPE_TEXT,
            'help' => 'In addition to freeform text, any HTML5 text-based input appears like so.',
        ),
        'dropDown' => array(
            'type' => TbHtml::INPUT_TYPE_DROPDOWNLIST,
            'items' => array('1', '2', '3', '4', '5'),
            'attributes' => array('empty' => 'Something...')
        ),
        'multiDropDown' => array(
            'type' => TbHtml::INPUT_TYPE_DROPDOWNLIST,
            'items' => array('1', '2', '3', '4', '5'),
            'attributes' => array('multiple' => true),
        ),
    ),
    'buttons' => array(
        'submit' => array(
            'type' => TbHtml::BUTTON_TYPE_SUBMIT,
            'label' => 'Submit',
            'attributes' => array('color' => TbHtml::BUTTON_COLOR_PRIMARY),
        ),
        'reset' => array(
            'type' => TbHtml::BUTTON_TYPE_RESET,
            'label' => 'Reset',
        ),
    ),
), $model); ?>

<?php echo $form; ?>

<?php $this->widget('bootstrap.widgets.TbModal', array(
    'id' => 'myModal',
    'header' => 'Modal Heading',
    'content' => '<p>One fine body...</p>',
    'footer' => array(
        TbHtml::button('Save Changes', array('data-dismiss' => 'modal', 'color' => TbHtml::BUTTON_COLOR_PRIMARY)),
        TbHtml::button('Close', array('data-dismiss' => 'modal')),
     ),
)); ?>

<?php echo TbHtml::button('Click me to open modal', array(
    'style' => TbHtml::BUTTON_COLOR_PRIMARY,
    'size' => TbHtml::BUTTON_SIZE_LARGE,
    'data-toggle' => 'modal',
    'data-target' => '#myModal',
)); ?>

Example coming soon!

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

<?php $this->widget('bootstrap.widgets.TbTabs', array(
    'tabs' => array(
        array('label' => 'Home', 'content' => '...', 'active' => true),
        array('label' => 'Profile', 'content' => '...'),
        array('label' => 'Messages', 'items' => array(
            array('label' => '@fat', 'content' => '...'),
            array('label' => '@mdo', 'content' => '...'),
        )),
    ),
)); ?>

Default alert

×Warning! Best check yo self, you're not looking too good.

Yii::app()->user->setFlash(TbHtml::ALERT_COLOR_WARNING,
    '<strong>Warning!</strong> Best check yo self, you\'re not looking too good.');

<?php $this->widget('bootstrap.widgets.TbAlert'); ?>

Block

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Yii::app()->user->setFlash(TbHtml::ALERT_COLOR_WARNING,
    '<h4>Warning!</h4> Best check yo self, you\'re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.');

<?php $this->widget('bootstrap.widgets.TbAlert', array(
    'block'=>true,
)); ?>

Contextual alternatives

Error or danger

×Oh snap! Change a few things up and try submitting again.

Yii::app()->user->setFlash(TbHtml::ALERT_COLOR_ERROR,
    '<strong>Oh snap!</strong> Change a few things up and try submitting again.');

Success

×Well done! You successfully read this important alert message.

Yii::app()->user->setFlash(TbHtml::ALERT_COLOR_SUCCESS,
    '<strong>Well done!</strong> You successfully read this important alert message.');

Information

×Heads up! This alert needs your attention, but it's not super important.

Yii::app()->user->setFlash(TbHtml::ALERT_COLOR_INFO,
    '<strong>Heads up!</strong> This alert needs your attention, but it\'s not super important.');

Example coming soon!

<?php $this->widget('bootstrap.widgets.TbTypeAhead', array(
    'name' => 'typeahead-test',
    'source' => array(...),
    'htmlOptions' => array(
        'prepend' => TbHtml::icon(TbHtml::ICON_GLOBE),
        'placeholder' => 'Write an USA state'
    ),
)); ?>

Example coming soon!

Widgets

Navigation TbNav.php

Basic tabs

Basic pills

Disabled state

Stackable

Stacked tabs

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Navbar TbNavbar.php

Basic navbar

Search form

Display variations

Responsive navbar

Inverted variation

Navigation TbNav.php

Basic tabs

Basic pills

Disabled state

Stackable

Stacked tabs

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Navbar TbNavbar.php

Basic navbar

Search form

Display variations

Responsive navbar

Inverted variation

Breadcrumb TbBreadcrumb.php

Hero unit TbHeroUnit.php

Hello, world!

Using a view

Grid view TbGridView.php

Optional styles

Striped

Bordered

Hover

Condensed

Forms TbActiveForm.php

Form builder

Modal TbModal.php

Scrollspy TbScrollspy.php

Togglable tabs TbTabs.php

Alert TbAlert.php

Default alert

Block

Warning!

Contextual alternatives

Error or danger

Success

Information

Collapse TbCollapse.php

Carousel TbCarousel.php

Typeahead TbTypeaAhead.php

Affix TbAffix.php