Available glyphs

Includes 180 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.

  • GLYPHICON_ADJUST
  • GLYPHICON_ALIGN_CENTER
  • GLYPHICON_ALIGN_JUSTIFY
  • GLYPHICON_ALIGN_LEFT
  • GLYPHICON_ALIGN_RIGHT
  • GLYPHICON_ARROW_DOWN
  • GLYPHICON_ARROW_LEFT
  • GLYPHICON_ARROW_RIGHT
  • GLYPHICON_ARROW_UP
  • GLYPHICON_ASTERISK
  • GLYPHICON_BACKWARD
  • GLYPHICON_BAN_CIRCLE
  • GLYPHICON_BARCODE
  • GLYPHICON_BELL
  • GLYPHICON_BOLD
  • GLYPHICON_BOOK
  • GLYPHICON_BOOKMARK
  • GLYPHICON_BRIEFCASE
  • GLYPHICON_BULLHORN
  • GLYPHICON_CALENDAR
  • GLYPHICON_CAMERA
  • GLYPHICON_CERTIFICATE
  • GLYPHICON_CHECK
  • GLYPHICON_CHEVRON_DOWN
  • GLYPHICON_CHEVRON_LEFT
  • GLYPHICON_CHEVRON_RIGHT
  • GLYPHICON_CHEVRON_UP
  • GLYPHICON_CIRCLE_ARROW_DOWN
  • GLYPHICON_CIRCLE_ARROW_LEFT
  • GLYPHICON_CIRCLE_ARROW_RIGHT
  • GLYPHICON_CIRCLE_ARROW_UP
  • GLYPHICON_CLOUD
  • GLYPHICON_CLOUD_DOWNLOAD
  • GLYPHICON_CLOUD_UPLOAD
  • GLYPHICON_COG
  • GLYPHICON_COLLAPSE_DOWN
  • GLYPHICON_COLLAPSE_UP
  • GLYPHICON_COMMENT
  • GLYPHICON_COMPRESSED
  • GLYPHICON_COPYRIGHT_MARK
  • GLYPHICON_CREDIT_CARD
  • GLYPHICON_CUTLERY
  • GLYPHICON_DASHBOARD
  • GLYPHICON_DOWNLOAD
  • GLYPHICON_DOWNLOAD_ALT
  • GLYPHICON_EARPHONE
  • GLYPHICON_EDIT
  • GLYPHICON_EJECT
  • GLYPHICON_ENVELOPE
  • GLYPHICON_EURO
  • GLYPHICON_EXCLAMATION_SIGN
  • GLYPHICON_EXPAND
  • GLYPHICON_EXPORT
  • GLYPHICON_EYE_CLOSE
  • GLYPHICON_EYE_OPEN
  • GLYPHICON_FACETIME_VIDEO
  • GLYPHICON_FAST_BACKWARD
  • GLYPHICON_FAST_FORWARD
  • GLYPHICON_FILE
  • GLYPHICON_FILM
  • GLYPHICON_FILTER
  • GLYPHICON_FIRE
  • GLYPHICON_FLAG
  • GLYPHICON_FLASH
  • GLYPHICON_FLOPPY_DISK
  • GLYPHICON_FLOPPY_OPEN
  • GLYPHICON_FLOPPY_REMOVE
  • GLYPHICON_FLOPPY_SAVE
  • GLYPHICON_FLOPPY_SAVED
  • GLYPHICON_FOLDER_CLOSE
  • GLYPHICON_FOLDER_OPEN
  • GLYPHICON_FONT
  • GLYPHICON_FORWARD
  • GLYPHICON_FULLSCREEN
  • GLYPHICON_GBP
  • GLYPHICON_GIFT
  • GLYPHICON_GLASS
  • GLYPHICON_GLOBE
  • GLYPHICON_HAND_DOWN
  • GLYPHICON_HAND_LEFT
  • GLYPHICON_HAND_RIGHT
  • GLYPHICON_HAND_UP
  • GLYPHICON_HD_VIDEO
  • GLYPHICON_HDD
  • GLYPHICON_HEADER
  • GLYPHICON_HEADPHONES
  • GLYPHICON_HEART
  • GLYPHICON_HEART_EMPTY
  • GLYPHICON_HOME
  • GLYPHICON_IMPORT
  • GLYPHICON_INBOX
  • GLYPHICON_INDENT_LEFT
  • GLYPHICON_INDENT_RIGHT
  • GLYPHICON_INFO_SIGN
  • GLYPHICON_ITALIC
  • GLYPHICON_LEAF
  • GLYPHICON_LINK
  • GLYPHICON_LIST
  • GLYPHICON_LIST_ALT
  • GLYPHICON_LOCK
  • GLYPHICON_LOG_IN
  • GLYPHICON_LOG_OUT
  • GLYPHICON_MAGNET
  • GLYPHICON_MAP_MARKER
  • GLYPHICON_MINUS
  • GLYPHICON_MINUS_SIGN
  • GLYPHICON_MOVE
  • GLYPHICON_MUSIC
  • GLYPHICON_NEW_WINDOW
  • GLYPHICON_OFF
  • GLYPHICON_OK
  • GLYPHICON_OK_CIRCLE
  • GLYPHICON_OK_SIGN
  • GLYPHICON_OPEN
  • GLYPHICON_PAPERCLIP
  • GLYPHICON_PAUSE
  • GLYPHICON_PENCIL
  • GLYPHICON_PHONE
  • GLYPHICON_PHONE_ALT
  • GLYPHICON_PICTURE
  • GLYPHICON_PLANE
  • GLYPHICON_PLAY
  • GLYPHICON_PLAY_CIRCLE
  • GLYPHICON_PLUS
  • GLYPHICON_PLUS_SIGN
  • GLYPHICON_PRINT
  • GLYPHICON_PUSHPIN
  • GLYPHICON_QRCODE
  • GLYPHICON_QUESTION_SIGN
  • GLYPHICON_RANDOM
  • GLYPHICON_RECORD
  • GLYPHICON_REFRESH
  • GLYPHICON_REGISTRATION_MARK
  • GLYPHICON_REMOVE
  • GLYPHICON_REMOVE_CIRCLE
  • GLYPHICON_REMOVE_SIGN
  • GLYPHICON_REPEAT
  • GLYPHICON_RESIZE_FULL
  • GLYPHICON_RESIZE_HORIZONTAL
  • GLYPHICON_RESIZE_SMALL
  • GLYPHICON_RESIZE_VERTICAL
  • GLYPHICON_RETWEET
  • GLYPHICON_ROAD
  • GLYPHICON_SAVE
  • GLYPHICON_SAVED
  • GLYPHICON_SCREENSHOT
  • GLYPHICON_SD_VIDEO
  • GLYPHICON_SEARCH
  • GLYPHICON_SEND
  • GLYPHICON_SHARE
  • GLYPHICON_SHARE_ALT
  • GLYPHICON_SHOPPING_CART
  • GLYPHICON_SIGNAL
  • GLYPHICON_SORT
  • GLYPHICON_SORT_BY_ALPHABET
  • GLYPHICON_SORT_BY_ALPHABET_ALT
  • GLYPHICON_SORT_BY_ATTRIBUTES
  • GLYPHICON_SORT_BY_ATTRIBUTES_ALT
  • GLYPHICON_SORT_BY_ORDER
  • GLYPHICON_SORT_BY_ORDER_ALT
  • GLYPHICON_SOUND_5_1
  • GLYPHICON_SOUND_6_1
  • GLYPHICON_SOUND_7_1
  • GLYPHICON_SOUND_DOLBY
  • GLYPHICON_SOUND_STEREO
  • GLYPHICON_STAR
  • GLYPHICON_STAR_EMPTY
  • GLYPHICON_STATS
  • GLYPHICON_STEP_BACKWARD
  • GLYPHICON_STEP_FORWARD
  • GLYPHICON_STOP
  • GLYPHICON_SUBTITLES
  • GLYPHICON_TAG
  • GLYPHICON_TAGS
  • GLYPHICON_TASKS
  • GLYPHICON_TEXT_HEIGHT
  • GLYPHICON_TEXT_WIDTH
  • GLYPHICON_TH
  • GLYPHICON_TH_LARGE
  • GLYPHICON_TH_LIST
  • GLYPHICON_THUMBS_DOWN
  • GLYPHICON_THUMBS_UP
  • GLYPHICON_TIME
  • GLYPHICON_TINT
  • GLYPHICON_TOWER
  • GLYPHICON_TRANSFER
  • GLYPHICON_TRASH
  • GLYPHICON_TREE_CONIFER
  • GLYPHICON_TREE_DECIDUOUS
  • GLYPHICON_UNCHECKED
  • GLYPHICON_UPLOAD
  • GLYPHICON_USD
  • GLYPHICON_USER
  • GLYPHICON_VOLUME_DOWN
  • GLYPHICON_VOLUME_OFF
  • GLYPHICON_VOLUME_UP
  • GLYPHICON_WARNING_SIGN
  • GLYPHICON_WRENCH
  • GLYPHICON_ZOOM_IN
  • GLYPHICON_ZOOM_OUT

How to use

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

            
<?php
echo BsHtml::icon(BsHtml::GLYPHICON_BARCODE);
?>

Examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

            
 <?php
echo BsHtml::buttonToolbar(array(
    array(
        
'items' => array(
            array(
                
'icon' => BsHtml::GLYPHICON_ALIGN_LEFT
            
),
            array(
                
'icon' => BsHtml::GLYPHICON_ALIGN_CENTER
            
),
            array(
                
'icon' => BsHtml::GLYPHICON_ALIGN_RIGHT
            
)
        )
    )
));

echo 
BsHtml::button('Large Button', array(
    
'size' => BsHtml::BUTTON_SIZE_LARGE,
    
'icon' => BsHtml::GLYPHICON_BELL
));

echo 
BsHtml::button('Primary button', array(
    
'icon' => BsHtml::GLYPHICON_BELL
));
echo 
BsHtml::button('Small button', array(
    
'size' => BsHtml::BUTTON_SIZE_SMALL,
    
'icon' => BsHtml::GLYPHICON_BELL
));
echo 
BsHtml::button('Extra small button', array(
    
'size' => BsHtml::BUTTON_SIZE_MINI,
    
'icon' => BsHtml::GLYPHICON_BELL
));

?>

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

           
 <?php
echo BsHtml::buttonDropdown('Dropdown', array(
    array(
        
'label' => 'Action',
        
'url' => '#'
    
),
    array(
        
'label' => 'Another action',
        
'url' => '#'
    
),
    array(
        
'label' => 'Something else here',
        
'url' => '#'
    
),
    
BsHtml::menuDivider(),
    array(
        
'label' => 'Separate link',
        
'url' => '#'
    
)
), array(
    
'split' => true,
    
'size' => BsHtml::BUTTON_SIZE_SMALL,
    
'color' => BsHtml::BUTTON_COLOR_INFO
));
?>

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

            
<?php
array(
    
'split' => true,
    
'size' => BsHtml::BUTTON_SIZE_SMALL,
    
'color' => BsHtml::BUTTON_COLOR_INFO,
    
'split' => true,
    
'dropup' => true,
    
'menuOptions' => array(
        
'pull' => BsHtml::PULL_RIGHT
    
)
);
?>

Add a header to label sections of actions in any dropdown menu.

            
<?php
echo BsHtml::buttonDropdown('Dropdown', array(
    
BsHtml::dropDownHeader('Dropdown Header'),
    array(
        
'label' => 'Action',
        
'url' => '#'
    
),
    array(
        
'label' => 'Another action',
        
'url' => '#'
    
),
    array(
        
'label' => 'Something else here',
        
'url' => '#'
    
),
    
BsHtml::menuDivider(),
    
BsHtml::dropDownHeader('Dropdown Header'),
    array(
        
'label' => 'Separate link',
        
'url' => '#'
    
)
));
?>

Add .disabled to a <li> in the dropdown to disable the link.

            
 <?php
echo BsHtml::buttonDropdown('Dropdown', array(
    array(
        
'label' => 'Another action',
        
'url' => '#'
    
),
    array(
        
'label' => 'Action',
        
'url' => '#',
        
'disabled' => true
    
),
    array(
        
'label' => 'Another action',
        
'url' => '#'
    
)
), array(
    
'split' => true,
    
'size' => BsHtml::BUTTON_SIZE_SMALL,
    
'color' => BsHtml::BUTTON_COLOR_WARNING
));
?>

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

Tooltips & popovers in button groups require special setting

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

Basic example

Wrap a series of buttons with .btn in .btn-group.

        
<?php
echo BsHtml::buttonGroup(array(
    array(
        
'label' => 'Left'
    
),
    array(
        
'label' => 'Middle'
    
),
    array(
        
'own' => BsHtml::ajaxButton('own'Yii::app()->createAbsoluteUrl('site/ajaxTest'), array(
            
'cache' => true,
            
'data' => array(
                
'message' => 'clicked the Ajaxbutton from the buttongroup'
            
),
            
'type' => 'POST',
            
'success' => 'js:function(data){
                        console.log(data);
                        $(".modal-body").html(data);
                        $("#demo_modal").modal("show");
                    }'
        
), array(
            
'icon' => BsHtml::GLYPHICON_BELL
        
))
    )
), array(
    
'color' => BsHtml::BUTTON_COLOR_WARNING,
    
'type' => BsHtml::BUTTON_TYPE_LINK
));
?>

Button toolbar

Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.

       
<?php
echo BsHtml::buttonToolbar(array(
    array(
        
'items' => array(
            array(
                
'icon' => BsHtml::GLYPHICON_CAMERA
            
),
            array(
                
'label' => '2'
            
),
            array(
                
'label' => '3'
            
),
            array(
                
'label' => '4'
            
)
        )
    ),
    array(
        
'items' => array(
            array(
                
'label' => '5'
            
),
            array(
                
'label' => '6'
            
),
            array(
                
'label' => '7'
            
)
        )
    )
));
?>

Sizing

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to the .btn-group. BsHtml::BUTTON_SIZE_LARGE BsHtml::BUTTON_SIZE_SMALL BsHtml::BUTTON_SIZE_MINI

       
<?php
echo BsHtml::buttonToolbar(array(
    array(
        
'items' => array(
            array(
                
'icon' => BsHtml::GLYPHICON_CAMERA
            
),
            array(
                
'label' => '2'
            
),
            array(
                
'label' => '3'
            
),
            array(
                
'label' => '4'
            
)
        )
    ),
    array(
        
'items' => array(
            array(
                
'label' => '5'
            
),
            array(
                
'label' => '6'
            
),
            array(
                
'label' => '7'
            
)
        )
    )
), array(
    
'size' => BsHtml::BUTTON_SIZE_MINI
));
?>

Nesting

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

        <?php
echo BsHtml::buttonToolbar(array(
    array(
        
'items' => array(
            array(
                
'label' => '1'
            
),
            array(
                
'label' => '2'
            
),
            array(
                
'own' => BsHtml::buttonDropdown('Dropdown', array(
                    
BsHtml::dropDownHeader('Dropdown Header'),
                    array(
                        
'label' => 'Action',
                        
'url' => '#'
                    
),
                    array(
                        
'label' => 'Another action',
                        
'url' => '#'
                    
),
                    array(
                        
'label' => 'Something else here',
                        
'url' => '#'
                    
),
                    
BsHtml::menuDivider(),
                    
BsHtml::dropDownHeader('Dropdown Header'),
                    array(
                        
'label' => 'Separate link',
                        
'url' => '#'
                    
)
                ))
            )
        )
    )
));
?>

Vertical variation

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

        
 <?php
echo BsHtml::verticalButtonGroup(array(
    array(
        
'label' => '1'
    
),
    array(
        
'label' => '2'
    
),
    array(
        
'own' => BsHtml::buttonDropdown('Dropdown', array(
            
BsHtml::dropDownHeader('Dropdown Header'),
            array(
                
'label' => 'Action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Another action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Something else here',
                
'url' => '#'
            
),
            
BsHtml::menuDivider(),
            
BsHtml::dropDownHeader('Dropdown Header'),
            array(
                
'label' => 'Separate link',
                
'url' => '#'
            
)
        ))
    )
    
));
?>

Justified link variation

Make a group of buttons stretch at the same size to span the entire width of its parent.

Element-specific usage

This only works with <a> elements as the <button> doesn't pick up these styles.

        
            <?php
echo BsHtml::buttonGroup(array(
    array(
        
'label' => 'Action',
        
'url' => '#',
        
'type' => BsHtml::BUTTON_TYPE_LINK
    
),
    array(
        
'label' => 'Another action',
        
'url' => '#',
        
'type' => BsHtml::BUTTON_TYPE_LINK
    
),
    array(
        
'label' => 'Something else here',
        
'url' => '#',
        
'type' => BsHtml::BUTTON_TYPE_LINK
    
)
), array(
    
'justified' => true
));
?>

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

Note the .nav-tabs class requires the .nav base class.

        
            <?php
echo BsHtml::tabs(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#'
    
)
));
?>

Take that same HTML, but use .nav-pills instead:

            
                <?php
echo BsHtml::pills(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#'
    
)
));
?>

Pills are also vertically stackable. Just add .nav-stacked.

            
                <?php
echo BsHtml::stackedPills(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#'
    
)
), array(
    
'style' => 'max-width:300px'
));
?>

Easily make tabs or pills equal widths of their parent with .nav-justified.

            
                <?php
echo BsHtml::tabs(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#'
    
)
), array(
    
'justified' => true
));
?>
<?php
echo BsHtml::pills(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#'
    
)
), array(
    
'justified' => true
));
?>

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

            
 <?php
echo BsHtml::pills(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => 'Messages',
        
'url' => '#',
        
'disabled' => true
    
)
), array(
    
'justified' => true
));
?>

Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.

Tabs with dropdowns

            
<?php
echo BsHtml::tabs(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Help',
        
'url' => '#'
    
),
    array(
        
'label' => 'Dropdown',
        
'items' => array(
            array(
                
'label' => 'Action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Another action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Something else here',
                
'url' => '#'
            
),
            
BsHtml::menuDivider(),
            array(
                
'label' => 'Separate link',
                
'url' => '#'
            
)
        )
    )
));
?>

Pills with dropdowns

            
<?php
echo BsHtml::pills(array(
    array(
        
'label' => 'Home',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Help',
        
'url' => '#'
    
),
    array(
        
'label' => 'Dropdown',
        
'items' => array(
            array(
                
'label' => 'Action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Another action',
                
'url' => '#'
            
),
            array(
                
'label' => 'Something else here',
                
'url' => '#'
            
),
            
BsHtml::menuDivider(),
            array(
                
'label' => 'Separate link',
                
'url' => '#'
            
)
        )
    )
));
?>

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Customize the collapsing point

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

        
            <?php
$this
->widget('bootstrap.widgets.BsNavbar', array(
    
'collapse' => true,
    
'brandLabel' => BsHtml::icon(BsHtml::GLYPHICON_HOME),
    
'brandUrl' => Yii::app()->homeUrl,
    
'items' => array(
        array(
            
'class' => 'bootstrap.widgets.BsNav',
            
'type' => 'navbar',
            
'activateParents' => true,
            
'items' => array(
                array(
                    
'label' => 'Home',
                    
'url' => array(
                        
'/site/index'
                    
),
                    
'items' => array(
                        
BsHtml::menuHeader(BsHtml::icon(BsHtml::GLYPHICON_BOOKMARK), array(
                            
'class' => 'text-center',
                            
'style' => 'color:#99cc32;font-size:32px;'
                        
)),
                        array(
                            
'label' => 'Home',
                            
'url' => array(
                                
'/site/index'
                            
)
                        ),
                        array(
                            
'label' => 'About',
                            
'url' => array(
                                
'/site/page',
                                
'view' => 'about'
                            
)
                        ),
                        array(
                            
'label' => 'Contact',
                            
'url' => array(
                                
'/site/contact'
                            
)
                        ),
                        
BsHtml::menuDivider(),
                        array(
                            
'label' => 'Login',
                            
'url' => array(
                                
'/site/login'
                            
),
                            
'visible' => Yii::app()->user->isGuest,
                            
'icon' => BsHtml::GLYPHICON_LOG_IN
                        
),
                        array(
                            
'label' => 'Logout (' Yii::app()->user->name ')',
                            
'url' => array(
                                
'/site/logout'
                            
),
                            
'visible' => !Yii::app()->user->isGuest
                        
),
                        array(
                            
'label' => 'Home',
                            
'url' => array(
                                
'/site/index'
                            
),
                            
'icon' => BsHtml::GLYPHICON_HOME
                        
),
                        array(
                            
'label' => 'About',
                            
'url' => array(
                                
'/site/page',
                                
'view' => 'about'
                            
),
                            
'icon' => BsHtml::GLYPHICON_PAPERCLIP
                        
),
                        array(
                            
'label' => 'Contact',
                            
'url' => array(
                                
'/site/contact'
                            
),
                            
'icon' => BsHtml::GLYPHICON_FLOPPY_OPEN
                        
)
                    )
                )
            )
        ),
        array(
            
'class' => 'bootstrap.widgets.BsNav',
            
'type' => 'navbar',
            
'activateParents' => true,
            
'items' => array(
                array(
                    
'label' => 'About',
                    
'url' => array(
                        
'/site/page',
                        
'view' => 'about'
                    
)
                ),
                array(
                    
'label' => 'Contact',
                    
'url' => array(
                        
'/site/contact'
                    
)
                ),
                array(
                    
'label' => 'Login',
                    
'url' => array(
                        
'/site/login'
                    
),
                    
'pull' => BsHtml::NAVBAR_NAV_PULL_RIGHT,
                    
'visible' => Yii::app()->user->isGuest
                
),
                array(
                    
'label' => 'Logout (' Yii::app()->user->name ')',
                    
'pull' => BsHtml::NAVBAR_NAV_PULL_RIGHT,
                    
'url' => array(
                        
'/site/logout'
                    
),
                    
'visible' => !Yii::app()->user->isGuest
                
)
            ),
            
'htmlOptions' => array(
                
'pull' => BsHtml::NAVBAR_NAV_PULL_RIGHT
            
)
        )
        
    )
));
?>

Plugin dependency

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Make navbars accessible

Be sure to add a role="navigation" to every navbar to help with accessibility.

For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

    
        <?php
$this
->widget('bootstrap.widgets.BsNavbar', array(
    
'collapse' => true,
    
'brandLabel' => '',
    
'brandUrl' => '',
    
'items' => array(
        
BsHtml::linkButton('sign', array(
            
'icon' => BsHtml::GLYPHICON_BOOKMARK,
            
'url' => array(
                
'/site/index'
            
),
            
'type' => BsHtml::BUTTON_TYPE_NAVBARBUTTON
        
))
        
    )
));
?>

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

'items'    => array(
                BsHtml::menuText('Signed in as Mark Otto'),
            ),

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

'items'    => array(
                BsHtml::menuText(
                    'Signed in as '.BsHtml::link(
                        'Mark Otto',
                        array('site/user','id' => Yii::app()->user->id),
                        array('class' => 'navbar-link')
                    ),
                    array('pull' => BsHtml::NAVBAR_NAV_PULL_RIGHT)
                ),
            ),

Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate <ul> with the respective utility class applied.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Add .navbar-fixed-top.

'position' => BsHtml::NAVBAR_POSITION_FIXED_TOP
'htmlOptions' => array(
        'containerOptions' => array(
            'fluid' => true
        ),
    ),

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }
            

Make sure to include this after the core Bootstrap CSS.

Add .navbar-fixed-bottom instead.

'position' => BsHtml::NAVBAR_POSITION_FIXED_BOTTOM

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-bottom: 70px; }
            

Make sure to include this after the core Bootstrap CSS.

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

'position' => BsHtml::NAVBAR_POSITION_STATIC_TOP

Modify the look of the navbar by adding .navbar-inverse.

'color' => BsHtml::NAVBAR_COLOR_INVERSE

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through :before and content.

Read more on Yii Class Reference

            
                <?php
echo BsHtml::breadcrumbs(array(
    
'Components'
));
?>
<?php
echo BsHtml::breadcrumbs(array(
    
'Components' => array(
        
'site/components',
        
'#' => 'breadcrumbs'
    
),
    
'BreadCrumb'
));
?>
<?php
$this
->widget('bootstrap.widgets.BsBreadCrumb', array(
    
'links' => array(
        
'Library'
    
),
    
// will change the container to ul
    
'tagName' => 'ul',
    
// will generate the clickable breadcrumb links
    
'activeLinkTemplate' => '<li><a href="{url}">{label}</a></li>',
    
// will generate the current page url : <li>News</li>
    
'inactiveLinkTemplate' => '<li>{label}</li>',
    
// will generate your homeurl item : <li><a href="/dr/dr/public_html/">Home</a></li>
    
'homeLink' => BsHtml::openTag('li') . BsHtml::icon(BsHtml::GLYPHICON_HOME) . BsHtml::closeTag('li')
));
?><!-- breadcrumbs -->

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.


 <?php
$list 
= array(
    array(
        
'label' => '«',
        
'url' => '#'
    
),
    array(
        
'label' => '1',
        
'url' => '#'
    
),
    array(
        
'label' => '2',
        
'url' => '#'
    
),
    array(
        
'label' => '3',
        
'url' => '#'
    
),
    array(
        
'label' => '4',
        
'url' => '#'
    
),
    array(
        
'label' => '5',
        
'url' => '#'
    
),
    array(
        
'label' => '»',
        
'url' => '#'
    
)
);
?>
<?php
echo BsHtml::pagination($list);
?>

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.


<?php
$list 
= array(
    array(
        
'label' => '«',
        
'url' => '#',
        
'disabled' => true
    
),
    array(
        
'label' => '1',
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => '2',
        
'url' => '#'
    
),
    array(
        
'label' => '3',
        
'url' => '#'
    
),
    array(
        
'label' => '4',
        
'url' => '#'
    
),
    array(
        
'label' => '5',
        
'url' => '#'
    
),
    array(
        
'label' => '»',
        
'url' => '#'
    
)
);
?>
<?php
echo BsHtml::pagination($list);
?>

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.


<?php
echo BsHtml::pagination($list, array(
    
'size' => BsHtml::PAGINATION_SIZE_LARGE
));
?>
<?php
echo BsHtml::pagination($list);
?>
<?php
echo BsHtml::pagination($list, array(
    
'size' => BsHtml::PAGINATION_SIZE_SMALL
));
?>

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pager centers links.

<
 <?php
echo BsHtml::pager(array(
    array(
        
'label' => 'Previous',
        
'url' => '#'
    
),
    array(
        
'label' => 'Next',
        
'url' => '#'
    
)
));
?>

Aligned links

Alternatively, you can align each link to the sides:

<
<?php
echo BsHtml::pager(array(
    array(
        
'label' => '&larr; Older',
        
'url' => '#',
        
'previous' 
=> true
    
),
    array(
        
'label' => 'Newer &rarr;',
        
'url' => '#',
        
'next' => true
    
)
));
?>

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.


 <?php
echo BsHtml::pager(array(
    array(
        
'label' => '&larr; Older',
        
'url' => '#',
        
'previous' 
=> true,
        
'disabled' => true
    
),
    array(
        
'label' => 'Newer &rarr;',
        
'url' => '#',
        
'next' => true
    
)
));
?>

Example

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
            
                    <h3>
Example heading 
<?php
echo BsHtml::labelTb('New');
?>
</h3>

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

Default Primary Success Info Warning Danger
            
<?php
echo BsHtml::bsLabel('Default');
?>
<?php
echo BsHtml::bsLabel('Primary', array(
    
'color' => BsHtml::LABEL_COLOR_PRIMARY
));
?>
<?php
echo BsHtml::bsLabel('Success', array(
    
'color' => BsHtml::LABEL_COLOR_SUCCESS
));
?>
<?php
echo BsHtml::bsLabel('Info', array(
    
'color' => BsHtml::LABEL_COLOR_INFO
));
?>
<?php
echo BsHtml::bsLabel('Warning', array(
    
'color' => BsHtml::LABEL_COLOR_WARNING
));
?>
<?php
echo BsHtml::bsLabel('Danger', array(
    
'color' => BsHtml::LABEL_COLOR_DANGER
));
?>

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.


<?= BsHtml::link('Inbox ' BsHtml::badge(42)) ?>

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill and list navigations.

            
<?php
echo BsHtml::pills(array(
    array(
        
'label' => 'Home ' BsHtml::badge('23'),
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => BsHtml::badge('56', array(
            
'pull' => BsHtml::PULL_RIGHT
        
)) . ' Messages',
        
'url' => '#'
    
)
));
?>
<?php
echo BsHtml::stackedPills(array(
    array(
        
'label' => 'Home ' BsHtml::badge('23'),
        
'url' => '#',
        
'active' => true
    
),
    array(
        
'label' => 'Profile',
        
'url' => '#'
    
),
    array(
        
'label' => BsHtml::badge('56', array(
            
'pull' => BsHtml::PULL_RIGHT
        
)) . ' Messages',
        
'url' => '#'
    
)
), array(
    
'style' => 'max-width:300px'
));
?>
       

A lightweight, flexible component that can optional extend the entire viewport to showcase key content on your site. To make the jumbotron full width, don't include it within a .container. Placing it within a container will keep it at the width of the rest of your content and provide rounded corners.

Hello, world!

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


<?= BsHtml::jumbotron('Hello, world!'$this->renderInternal(Yii::app()->basePath '/views/site/components/_jumboPartial.php', array(), true)) ?>

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 as most other components (with additional styles).


<?= BsHtml::pageHeader('Example page header''Subtext for header'?>

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

No default class

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

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

<?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_SUCCESSBsHtml::bold('Well done !') . 'You successfully read this important alert message.');
?>
<?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_INFOBsHtml::bold('Well done !') . 'You successfully read this important alert message.');
?>
<?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_WARNINGBsHtml::bold('Well done !') . 'You successfully read this important alert message.');
?>
<?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_DANGERBsHtml::bold('Well done !') . 'You successfully read this important alert message.');
?>

Dismissable alerts

Build on any alert by adding an optional .alert-dismissable and close button.

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

<?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_DEFAULTBsHtml::bold('Well done !') . 'You successfully read this important alert message.');
?>

Ensure proper behavior across all devices

Be sure to use the <button> element with the data-dismiss="alert" data attribute.

Use the .alert-link utility class to quickly provide matching colored links within any alert.

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

 <?php
echo BsHtml::alert(BsHtml::ALERT_COLOR_SUCCESSBsHtml::bold('Well done !') . 'You successfully read' BsHtml::alertLink(' this important alert message.', array(
    
'#' => ''
)));
?>

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Cross-browser compatibility

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.

Basic example

Default progress bar.

            
<?php
echo BsHtml::progressBar(60);
?>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

            
<?php
echo BsHtml::progressBar(20, array(
    
'color' => BsHtml::PROGRESS_COLOR_SUCCESS
));
?>
<?php
echo BsHtml::progressBar(40, array(
    
'color' => BsHtml::PROGRESS_COLOR_INFO
));
?>
<?php
echo BsHtml::progressBar(60, array(
    
'color' => BsHtml::PROGRESS_COLOR_WARNING
));
?>
<?php
echo BsHtml::progressBar(80, array(
    
'color' => BsHtml::PROGRESS_COLOR_DANGER
));
?>

Striped

Uses a gradient to create a striped effect. Not available in IE8.

            
<?php
echo BsHtml::progressBar(20, array(
    
'color' => BsHtml::PROGRESS_COLOR_SUCCESS,
    
'striped' => true
));
?>
<?php
echo BsHtml::progressBar(40, array(
    
'color' => BsHtml::PROGRESS_COLOR_INFO,
    
'striped' => true
));
?>
<?php
echo BsHtml::progressBar(60, array(
    
'color' => BsHtml::PROGRESS_COLOR_WARNING,
    
'striped' => true
));
?>
<?php
echo BsHtml::progressBar(80, array(
    
'color' => BsHtml::PROGRESS_COLOR_DANGER,
    
'striped' => true
));
?>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

    
<?php
echo BsHtml::progressBar(20, array(
    
'striped' => true,
    
'active' => true
));
?>

Stacked

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

            
<?php
echo BsHtml::stackedProgressBar(array(
    array(
        
'color' => BsHtml::PROGRESS_COLOR_SUCCESS,
        
'width' => 35
    
),
    array(
        
'color' => BsHtml::PROGRESS_COLOR_WARNING,
        
'width' => 20
    
),
    array(
        
'color' => BsHtml::PROGRESS_COLOR_DANGER,
        
'width' => 10
    
)
));
?>

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic Example

Panel content
                
<?php
$this
->beginWidget('bootstrap.widgets.BsPanel');
?>
Panel content
<?php
$this
->endWidget();
?>

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading.

Panel title
Panel content
                
<?php
$this
->beginWidget('bootstrap.widgets.BsPanel', array(
    
'title' => 'Panel title'
));
?>
Panel content
<?php
$this
->endWidget();
?>

Example of a contextual alternative and table

Panel title
idfirstNamelastName
1JacobThornton
2MarkOtto
3MarkOtto
4JacobThornton
5MarkOtto
Displaying 1-5 of 50 results.
                
<?php
$this
->beginWidget('bootstrap.widgets.BsPanel', array(
    
'title' => 'Panel title',
    
'type' => BsHtml::PANEL_TYPE_PRIMARY
));
?>
Panel content
<?php
$this
->endWidget();
?>

Default well

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

Look, I'm in a well!

<?php
echo BsHtml::well("Look, I'm in a well!");
?>

Optional classes

Control padding and rounded corners with two optional modifier classes.

Look, I'm in a well!
            
<?php
echo BsHtml::well("Look, I'm in a well!", array(
    
'size' => BsHtml::WELL_SIZE_LARGE
));
?>
Look, I'm in a well!

<?php
echo BsHtml::well("Look, I'm in a well!", array(
    
'size' => BsHtml::WELL_SIZE_SMALL
));
?>