bootstrap Follow @yiiframework

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).

Links ¶

Donate ¶

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

Donate with PayPal

Requirements ¶

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

Setup ¶

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

Changes ¶

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

#13328

jack82 at 2013/05/22 11:56am

Widget without define model

How could I do to use the widget YiiBooster without defining the model?is it possible?

#13220

zvik2004 at 2013/05/15 01:00pm

Show TbModal from grid view

Hi,
I would like to have a link in my grid that will open a modal dialog.
I would like that this dialog content will be retrieved from the controller when the dialog is opened.
Thanks for your help,
Zvi.

#12903

Trejder at 2013/04/19 06:42am

Popovers issue on IE9 and older

Just a small notice, for those, who hasn't get to know this yet (I was surprised): Popovers doesn't work under Internet Explorer 9 and earlier.

Tested them to work like a charm under newest FF and Chrome, but no luck under IE.

#12853

RobD at 2013/04/16 03:48am

Tabs

Great extension !

Is there a way to embed a grid in a tab ? HOw would I set the "content" array variable ?

#12483

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

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

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

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(
    'items'=>array(
        array(
            'class'=>'bootstrap.widgets.TbMenu',
            'items'=>array(
                array(
                    'encodeLabel'=>false,
                    'linkOptions'=> array('encode'=>false),
                    'label'=> '<i class="icon-user"></i>' . $this->user->email, 
                    'url'=>'',
                    'items'=>array(
                        array('label'=>'Account info', 'url'=>'#'),
                        '---',
                        array('label'=>'Logout', 'url'=>'#'),
                    )
                ),
            ),
        ),
    ),
)); 
?>

What am I doing wrong?

#12142

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:

Yii::app()->bootstrap->register();

#12025

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

ShiblY KhaN at 2013/02/17 09:18am

Checkbox

pre define checked not working:

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

#11930

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

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

Giancarlo at 2013/02/11 11:23am

Re: Use CalendarWidget

I have commented:

//Translate::dateLang(),

because it return an error.

But now, i see the component in japanese language

#11881

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

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

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

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

'rel'=>'myPopover'

second, you have to call popover() manually

$('[rel="myPopover"]').popover({ 
  html: true
});

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

#11580

Giancarlo at 2013/01/21 10:38am

Re: Use htmlspecialchars to encode content

does not work

#11579

pmaselkowski at 2013/01/21 09:56am

Re: Can I use html tags in twitter-bootstrap popover data-content?

Use htmlspecialchars to encode content.

Please login to leave your comment.