Yii 1.1: bootstrap

Yii-Bootstrap - Bringing together Yii and Twitter Bootstrap

This extension brings together Yii and Bootstrap, Twitter's HTML, CSS and JavaScript toolkit. It provides a wide range of widgets that allow you to easily use Bootstrap with Yii. All widgets have been developed following Yii's conventions and work seamlessly together with Bootstrap and its jQuery plugins.

Note before upgrading to 2.0.x

Bootstrap should no longer be preloaded, instead you should define a path alias, bootstrap, in your application configuration (an example can be found here).



Do you want to say thanks for the time and efforts put on this project?

Donate with PayPal


Yii 1.1.10 or above (Bootstrap requires jQuery 1.7.1 or newer).


Installation instructions can be found here: Yii-Bootstrap home.

What's included?

Bootstrap contains the following widgets:

  • TbAffix - Affix wrapper
  • TbActiveForm - ActiveForm
  • TbAlert - Flash messages
  • TbBadge - Badges
  • TbBreadcrumbs - Breadcrumbs
  • TbButton - Buttons
  • TbButtonGroup - Button groups
  • TbCarousel - Image carousel
  • TbCollapse - Collapse wrapper
  • TbDetailView - Detail view
  • TbGridView - Grid view
  • TbHeroUnit - Page head
  • TbLabel - Labels
  • TbListView - List view
  • TbMenu - Menu
  • TbModal - Modal dialog
  • TbNavbar - Navigation bar
  • TbPager - Pager
  • TbProgress - Progress bars
  • TbScrollSpy - Scrollspy wrapper
  • TbTabs - JavaScript tabs
  • TbThumbnails - Image grid
  • TbTypeahead - Autocomplete


Version 2.1.0 (March 17, 2013)

  • Upgrade to Bootstrap 2.3.1

Version 2.0.3 (Jan 1, 2013)

  • Fixed less import issue

Version 2.0.2 (Dec 22, 2012)

  • Fixed some bugs

Version 2.0.1 (Dec 19, 2012)

  • Fixed some old bugs

Version 2.0.0 (Dec 19, 2012)

  • Upgraded to Bootstrap 2.2.2
  • Added support for form builder
  • Added Bootstrap base theme
  • Added affix widget
  • Restructured assets and remove lib
  • Changed the way some plugins are registered
  • A lot of other minor improvements

Version 1.2.0 (Nov 1, 2012)

  • Upgraded to Bootstrap 2.2.1

Version 1.1.0 (Sep 20, 2012)

  • Upgraded to Bootstrap 2.1.1

Version 1.0.0 (Aug 22, 2012)

  • Upgraded Bootstrap to 2.1.0
  • Changed class prefix to Tb
  • Added collapse and scrollspy widgets
  • Rewrote the alert widget
  • Rewrote menus to extend CMenu
  • Renamed tabbable to tabs
  • Improved the active form widget
  • Added for the nested menu items
  • Added support for dropups
  • Numerous other minor improvements
  • Fixed a huge bunch of bugs
  • Completely reworked the demo

Version 0.10.0 BETA (May 13, 2012)

  • Major improvements to BootActiveForm and BootInput
  • Changed BootGridView and BootListView to automatically rebind popovers and tooltips
  • Fixed vertical form validation styles (#30)
  • Fixed BootCarousel binding (#78)
  • Fixed BootBreadcrumbs homeLink

Version 0.9.12 (Apr 25, 2012)

  • Upgraded to Bootstrap 2.0.3
  • Changed to use bootstrap.min.js instead of separate files
  • Fixed BootModal JavaScript options
  • Fixed Bootstrap Gii templates (#66)
  • Added support for add-ons on password fields (#64)
  • Fixed disabling of BootBreadcrumbs homeLink (#61)
  • Fixed BootNavbar static positioning (#60)
  • Fixed BootActiveForm textfield validation (#54)
  • Fixed resolving of BootInput checkbox and radio attributes (#52)

Version 0.9.11 (Apr 14, 2012)

  • Added BootLabel, BootBadge
  • BootTabbable improvements
  • BootButton, BootButtonGroup improvements
  • BootNavbar, BootMenu improvements
  • BootGridView, BootDetailView improvements
  • Fixed BootTabbable events
  • Added missing CSS for Yii components
  • Renamed BootButton::fn to buttonType

Version 0.9.10 (Mar 13, 2012)

  • Upgraded to Bootstrap 2.0.2
  • Added BootHero, BootCarousel, BootProgress, BootTypeahead
  • BootButton and BootButtonGroup improvements
  • BootBaseMenu, BootMenu, BootDropdown improvements
  • Renamed BootCrumb to BootBreadcrumbs
  • Renamed BootThumbs to BootThumbnails

Version 0.9.9 (Feb 17, 2012)

  • Upgraded to Bootstrap 2.0.1
  • Integrated Bootstrap's native jQuery plugins
  • Plugin API
  • Renamed BootNav to BootNavbar
  • Renamed BootTabs to BootTabbed
  • Renamed BootTwipsy to BootTooltip
  • Renamed BootMediaGrid to BootThumbs

Version 0.9.7 (Dec 24, 2011)

  • Added BootNav (Topbar navigation)
  • Added support for dropdown menus in BootMenu (and BootNav)
  • Fixed import paths

Version 0.9.6 (Dec 16, 2011)

  • Added BootTabs (JavaScript tabs)
  • Fixed an issue with sorting in BootGridView
  • Fixed the order hint and error are rendered by BootInput
  • Changed the script files and scripts to be registered correctly
  • Corrected the close text for BootAlert

Version 0.9.5 (Dec 2, 2011)

  • Fixed a bug in the Bootstrap Gii generator
  • Added support for input lists
  • Combined BootTabs and BootPills to BootMenu
  • Moved all widgets under the same folder
  • Removed BootHtml
  • Renamed BootInputBlock to BootInput
  • Renamed the block methods in BootActiveForm to row

Version 0.9.4 (Nov 14, 2011)

  • Updated to Bootstrap 1.4.0

Version 0.9.3 (Oct 23, 2011)

  • Added BootModal, BootTabs, BootPills
  • Renamed BootFlash to BootAlert
  • Replaced the jQuery plugins with completely new jQuery UI widgets
  • Added support rendering of captcha rows

Version 0.9.2 (Oct 21, 2011)

  • Added BootPopover (rich content tooltip widget)
  • Fixed a few bugs in the BootCrumb widget
  • Improved the jQuery plugins

Version 0.9.1 (Oct 3, 2011)

  • Added BootFlash (flash message widget)
  • Added BootstrapGenerator (Gii CRUD templates)
  • Various improvements to BootActiveForm

Version 0.9.0 (Sep 26, 2011)

  • Initial public release

Total 20 comments

#19170 report it
Aruna Attanayake at 2015/04/03 09:15pm
Docs availability

@Siquo thank you very much for setting up the documentation.

#18768 report it
Siquo at 2015/01/02 08:22am
Documentation mirror

Having used this in an extensive project, finding out that the documentation has been completely taken offline is not really nice.

I've contacted Christoffer and he pointed out that there's a copy of the docs in the "demo" section of the BitBucket repository. I've put it online here: http://docs.siquo.net/yii-bootstrap/ and will keep it there for as long as I can.

Edited comment to be a bit nicer.

#18766 report it
dholzgang at 2015/01/02 01:25am
Developer Is Not Professional

It would appear that the developer of this has moved on to a new version at Yiistrap (see the post #18694). The documentation there may be of some help. However, given how unprofessionally the transition from the old version was handled and the apparently very cavalier treatment of users, I won't use either the new or the old, and would not recommend it.

#18694 report it
Don Felipe at 2014/12/13 07:44am
@Victor Lacerda Azevedo

The developers moved on to another extension based on a more current version of Bootstrap. Check this out: yiistrap; official homepage:

http://www.getyiistrap.com/ (current bootstrap for yii)

Yiiwheels, an extension for yiistrap providing all kinds of plugins that are not part of the original bootstrap; e.g. extended grids, jquery stuff:


#18693 report it
Victor Lacerda Azevedo at 2014/12/13 07:16am
Without docs

Unfortunately their developer stop the project.

We not have no more bootstrap updatings. We not have no more additional features. We not have no more docs. The site is down.

Developers... come back.

#12483 report it
bettor at 2013/03/22 01:13pm
there is a fix

someone has already posted a fix:

in the TbNavbar.php file on line 140 (at least in phpstorm) the line should be:

'htmlOptions'=>array('class'=>'nav-collapse collapse'),

this fixes the problem I think

Here is the fix itself: https://bitbucket.org/Crisu83/yii-bootstrap/issue/221/responsive-tbnavbar-css-class

#12481 report it
schmunk at 2013/03/22 12:24pm
iPhone Navbar

Yes, it is discussed here and here. AFAIK the only workaround so far is to leave the menu open.

#12479 report it
bettor at 2013/03/22 12:11pm
drop downs not working in collapse mode

in collapse mode when I click on a drop down the container does not auto extend and the expanded menu goes behind it and cannot be seen properly. Is anybody else experiencing this issue?

#12208 report it
engvard at 2013/03/06 11:46am
Is it possible to disable encoding of navbar label?

Hi. I'm trying to put html content into navbar label. Is it possible? I've tried the following:

<?php $this->widget('bootstrap.widgets.TbNavbar', array(
                    'linkOptions'=> array('encode'=>false),
                    'label'=> '<i class="icon-user"></i>' . $this->user->email, 
                        array('label'=>'Account info', 'url'=>'#'),
                        array('label'=>'Logout', 'url'=>'#'),

What am I doing wrong?

#12142 report it
Webnet668 at 2013/02/28 05:33pm
Loading CSS/JS Files

For some reason the extension doesn't include the necessary CSS/JS files when being used. You'll need to use this:

#12025 report it
dmapes123 at 2013/02/21 12:05am
suggestion for tooltip

i suggest you change the tooltip selector to $selector : 'a[rel*=tooltip]'; so that other items can be used in the Rel as well.

#11975 report it
ShiblY KhaN at 2013/02/17 09:18am

pre define checked not working:

$form->checkBoxListRow($model, 'intervals',CHtml::listData($data['intervals'],'id','inumber'),array('checked'=>'checked')

#11930 report it
bettor at 2013/02/13 10:37am
Navbar bootstrap.widgets.TbNavbar breaks cgridview under IE

Hi all,

I just like to highlight that after setting up Navbar (bootstrap.widgets.TbNavbar) it broke the cgridview in Yii. Namely, the issue is when you try to sort or filter the whole cgridview disappears.

If anybody has seen this and knows how to fix it please share.

#11893 report it
Reza Bagheri at 2013/02/11 12:13pm
TCKeditor and file upload

Hi, before bootstrp I use ckeditor and kcfinder together to manage and upload images(inside ckeditor) in bootstrap i have ckeditor and dont need to add ckeditor to extentions, but i cant'nt attach kcfinder to bootstrap.ckeditor! how can i do?

#11892 report it
Giancarlo at 2013/02/11 11:23am
Re: Use CalendarWidget

I have commented:


because it return an error.

But now, i see the component in japanese language

#11881 report it
Edgar Kuskov at 2013/02/11 06:40am
Use CalendarWidget

Copy it to your Extensions folder and insert this code into your form:

$this -> widget('CJuiDateTimePicker', array(
                                    'language' => Translate::dateLang(),
                                    'model' => $model, // Model object
                                    'attribute' => 'birthDate',
                                    'options' => array(
                                            'mode' => 'date',
                                            'changeYear' => true,
                                            'changeMonth' => true,
                                            'yearRange' => '1900:2200',
                                            'dateFormat' => 'yy-mm-dd',
                                            'timeFormat' => '',
                                            'showTimepicker' => false,
                                    'htmlOptions' => array(
                                            'placeholder' => 'Birtday Date',
                                            'style' => 'width:180px !important;',
                                            'class'=>'input' . ( $model->getError('birthDate')  ? ' error' : '')
#11880 report it
Giancarlo at 2013/02/11 04:23am
Re: DateTime Picker with Append Calendar icon

Edgar, can you explain how to use? Can you how to use?

#11864 report it
Edgar Kuskov at 2013/02/08 06:07am
DateTime Picker with Append Calendar icon

A bit of contributing, here is a link for a CJuiDateTimePicker in Bootstrap style. I added an append to the end of the DateTimePicker with Calendar Icon:

Link to download datetimepicker

#11590 report it
Don Felipe at 2013/01/22 04:00am
@giancarlo @pmaselkowski -- content with html tags in popover

Bootstrap adds a simple popover() call that is listening to rel=popover by default and it doesn't display any html. However, you can add your own js-popover call manually and make sure it does display html tags.

first, you have to change the value for the rel attribute


second, you have to call popover() manually

  html: true

and then you can put whatever html tags inside data-content!

#11580 report it
Giancarlo at 2013/01/21 10:38am
Re: Use htmlspecialchars to encode content

does not work

Leave a comment

Please to leave your comment.

Create extension