Single button group

Left Middle Right

<?php
echo TbHtml::buttonGroup(array(
    array('label' => 'Left'),
    array('label' => 'Middle'),
    array('label' => 'Right'),
)); ?>

Multiple button groups

<?php echo TbHtml::buttonToolbar(array(
    array('items' => array(
        array('label' => '1'),
        array('label' => '2'),
        array('label' => '3'),
        array('label' => '4'),
    )),
    array('items' => array(
        array('label' => '5'),
        array('label' => '6'),
        array('label' => '7'),
    )),
    array('items' => array(
        array('label' => '8'),
    )),
)); ?>

Vertical button groups

<?php echo TbHtml::buttonGroup(array(
    array('icon' => 'align-left'),
    array('icon' => 'align-center'),
    array('icon' => 'align-right'),
    array('icon' => 'align-justify'),
), array('vertical' => true)); ?>

Checkbox

Left Middle Right

<?php
echo TbHtml::buttonGroup(array(
    array('label' => 'Left'),
    array('label' => 'Middle'),
    array('label' => 'Right'),
), array('toggle' => TbHtml::BUTTON_TOGGLE_CHECKBOX, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>

Radio

Left Middle Right

<?php
echo TbHtml::buttonGroup(array(
    array('label' => 'Left'),
    array('label' => 'Middle'),
    array('label' => 'Right'),
), array('toggle' => TbHtml::BUTTON_TOGGLE_RADIO, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>

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

Works with all button sizes

<?php echo TbHtml::buttonDropdown('Action', array(
    array('label' => 'Action', 'url' => '#'),
    array('label' => 'Another action', 'url' => '#'),
    array('label' => 'Something else here', 'url' => '#'),
    TbHtml::menuDivider(),
    array('label' => 'Separate link', 'url' => '#'),
), array('size'=>TbHtml::BUTTON_SIZE_MINI)); ?>

Split button dropdowns

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

Dropup menus

<?php echo TbHtml::buttonDropdown('Right dropup', array(
    array('label' => 'Action', 'url' => '#'),
    array('label' => 'Another action', 'url' => '#'),
    array('label' => 'Something else here', 'url' => '#'),
    TbHtml::menuDivider(),
    array('label' => 'Separate link', 'url' => '#'),
), array('split' => true, 'dropup' => true, 'menuOptions' => array('pull' => TbHtml::PULL_RIGHT))); ?>

Basic tabs

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

Basic pills

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

Disabled state

<?php echo TbHtml::pills(array(
    array('label' => 'Clickable link', 'url' => '#'),
    array('label' => 'Clickable link', 'url' => '#'),
    array('label' => 'Disabled link', 'url' => '#', 'disabled' => true),
)); ?>

Stackable

Stacked tabs

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

Stacked pills

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

Dropdowns

Tabs with dropdowns

<?php echo TbHtml::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' => '#'),
        TbHtml::menuDivider(),
        array('label' => 'Separate link', 'url' => '#'),
    )),
)); ?>

Pills with dropdowns

<?php echo TbHtml::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' => '#'),
        TbHtml::menuDivider(),
        array('label' => 'Separate link', 'url' => '#'),
    )),
)); ?>

Nav lists

<div class="well" style="max-width: 340px; padding: 8px 0;">
    <?php echo TbHtml::navList(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' => '#'),
    )); ?>
</div>

Tabbable nav

Tabbable example

I'm in Section 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

<?php echo TbHtml::tabbableTabs(array(
    array('label' => 'Section 1', 'active' => true, 'content' => '<p>I\'m in Section 1.</p>'),
    array('label' => 'Section 2', 'content' => '<p>Howdy, I\'m in Section 2.</p>'),
    array('label' => 'Section 3', 'content' => '<p>What up girl, this is Section 3.</p>'),
)); ?>

Tabbable in any direction

Tabs on the bottom

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<?php echo TbHtml::tabbableTabs(array(
    array('label' => 'Section 1', 'active' => true, 'content' => '...'),
    array('label' => 'Section 2', 'content' => '...'),
    array('label' => 'Section 3', 'content' => '...'),
), array('placement' => TbHtml::TABS_PLACEMENT_BELOW); ?>

Tabs on the left

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<?php echo TbHtml::tabbableTabs(array(
    array('label' => 'Section 1', 'active' => true, 'content' => '...'),
    array('label' => 'Section 2', 'content' => '...'),
    array('label' => 'Section 3', 'content' => '...'),
), array('placement' => TbHtml::TABS_PLACEMENT_LEFT); ?>

Tabs on the right

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

<?php echo TbHtml::tabbableTabs(array(
    array('label' => 'Section 1', 'active' => true, 'content' => '..'),
    array('label' => 'Section 2', 'content' => '..'),
    array('label' => 'Section 3', 'content' => '...'),
), array('placement' => TbHtml::TABS_PLACEMENT_RIGHT); ?>

Standard pagination

<?php echo TbHtml::pagination(array(
      array('label' => '&laquo;', 'url' => '#'),
      array('label' => '1', 'url' => '#'),
      array('label' => '2', 'url' => '#'),
      array('label' => '3', 'url' => '#'),
      array('label' => '4', 'url' => '#'),
      array('label' => '5', 'url' => '#'),
      array('label' => '&raquo;', 'url' => '#'),
)); ?>

Options

Disable and active states

<?php echo TbHtml::pagination(array(
    array('label' => '&laquo;', 'url' => '#', 'disabled' => true),
    array('label' => '1', 'url' => '#', 'active' => true),
    ...
)); ?>

Sizes

<?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_LARGE)); ?>
<?php echo TbHtml::pagination(array(...)); ?>
<?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_SMALL)); ?>
<?php echo TbHtml::pagination(array(...), array('size' => TbHtml::PAGINATION_SIZE_MINI)); ?>

Alignments

<?php echo TbHtml::pagination(array(...), array('align' => TbHtml::PAGINATION_ALIGN_CENTER)); ?>

<?php echo TbHtml::pagination(array(...), array('align' => TbHtml::PAGINATION_ALIGN_RIGHT)); ?>

Pager

Default example

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

Aligned links

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

Optional disabled state

<?php echo TbHtml::pager(array(
    array('label' => '&larr; Older', 'url' => '#', 'previous' => true, 'disabled' => true),
    ...
)); ?>

<?php echo TbHtml::breadcrumbs(array(
    'Home' => '#',
    'Library' => '#',
    'Data',
)); ?>

Labels

Labels	Code
Default	`<?php echo TbHtml::labelTb('Default'); ?>`
Success	`<?php echo TbHtml::labelTb('Success', array('color' => TbHtml::LABEL_COLOR_SUCCESS)); ?>`
Warning	`<?php echo TbHtml::labelTb('Warning', array('color' => TbHtml::LABEL_COLOR_WARNING)); ?>`
Important	`<?php echo TbHtml::labelTb('Important', array('color' => TbHtml::LABEL_COLOR_IMPORTANT)); ?>`
Info	`<?php echo TbHtml::labelTb('Info', array('color' => TbHtml::LABEL_COLOR_INFO)); ?>`
Inverse	`<?php echo TbHtml::labelTb('Inverse', array('color' => TbHtml::LABEL_COLOR_INVERSE)); ?>`

Badges

Name	Example	Code
Default	1	`<?php echo TbHtml::badge('1'); ?>`
Success	2	`<?php echo TbHtml::badge('2', array('color' => TbHtml::BADGE_COLOR_SUCCESS)); ?>`
Warning	4	`<?php echo TbHtml::badge('4', array('color' => TbHtml::BADGE_COLOR_WARNING)); ?>`
Important	6	`<?php echo TbHtml::badge('6', array('color' => TbHtml::BADGE_COLOR_IMPORTANT)); ?>`
Info	8	`<?php echo TbHtml::badge('8', array('color' => TbHtml::BADGE_COLOR_INFO)); ?>`
Inverse	10	`<?php echo TbHtml::badge('10', array('color' => TbHtml::BADGE_COLOR_INVERSE)); ?>`

Hero unit

Hello, world!

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

<?php echo TbHtml::heroUnit('Hello, world!', '...'); ?>

Page header

<?php TbHtml::pageHeader('Example page header', 'Subtext for header'); ?>

Default thumbnails

<?php echo TbHtml::thumbnails(array(
    array('image' => 'holder.js/260x180', 'url' => '#'),
    array('image' => 'holder.js/260x180', 'url' => '#'),
    array('image' => 'holder.js/260x180', 'url' => '#'),
    array('image' => 'holder.js/260x180', 'url' => '#'),
)); ?>

Thumbnails with caption

Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Thumbnail label
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<?php echo TbHtml::thumbnails(array(
    array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'),
    array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'),
    array('image' => 'holder.js/300x200', 'label' => 'Thumbnail label', 'caption' => '...'),
), array('span' => 4)); ?>

Different sizes

<?php echo TbHtml::thumbnails(array(
    array('image' => 'holder.js/360x270', 'url' => '#', 'span' => 4),
    array('image' => 'holder.js/260x120', 'url' => '#', 'span' => 3),
    array('image' => 'holder.js/160x120', 'url' => '#', 'span' => 2),
    array('image' => 'holder.js/260x120', 'url' => '#', 'span' => 3),
    array('image' => 'holder.js/160x120', 'url' => '#', 'span' => 2),
)); ?>

    Tight pants next level keffiyeh <?php echo TbHtml::tooltip('you probably', '#', 'Default tooltip'); ?> haven\'t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney\'s fixie sustainable quinoa 8-bit american apparel <?php echo TbHtml::tooltip('have a', '#', 'Another tooltip'); ?> richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney\'s cleanse vegan chambray. A really ironic artisan <?php echo TbHtml::tooltip('whatever keytar', '#', 'Another one here too'); ?>, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

Four directions

<?php echo TbHtml::tooltip(...); ?>
<?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_RIGHT)); ?>
<?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_BOTTOM)); ?>
<?php echo TbHtml::tooltip(..., array('placement' => TbHtml::TOOLTIP_PLACEMENT_LEFT)); ?>

Click to toggle popover

<?php echo TbHtml::popover('Click to toggle popover', 'A Title', '...', array(
    'class' => 'btn btn-large btn-danger',
)); ?>

Four directions

Default alert

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.

<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_WARNING, '...'); ?>

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.

<?php echo TbHtml::blockAlert(TbHtml::ALERT_COLOR_WARNING, '...'); ?>

Contextual alternatives

Error or danger

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

<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_ERROR, '...'); ?>

Success

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

<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_SUCCESS, '...'); ?>

Information

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

<?php echo TbHtml::alert(TbHtml::ALERT_COLOR_INFO, '...'); ?>

Basic

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

Striped

<?php echo TbHtml::stripedProgressBar(20); ?>

Animated

<?php echo TbHtml::animatedProgressBar(40); ?>

Stacked

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

Default example

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<?php echo TbHtml::mediaList(array(
    array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'),
    array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array(
        array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'),
    )),
)); ?>

Media list

Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<?php echo TbHtml::mediaList(array(
    array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array(
        array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...', 'items' => array(
            array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'),
        )),
        array('image' => 'holder.js/64x64', 'heading' => 'Media heading', 'content' => '...'),
    )),
    array('heading' => 'Media heading', 'content' => '...'),
)); ?>

First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹›

<?php echo TbHtml::carousel(array(
    array('image' => 'holder.js/830x477', 'label' => 'First Thumbnail label', 'caption' => '...'),
    array('image' => 'holder.js/830x477', 'label' => 'Second Thumbnail label', 'caption' => '...'),
    array('image' => 'holder.js/830x477', 'label' => 'Third Thumbnail label', 'caption' => '...'),
)); ?>

Wells

Look, I'm in a well!

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

Sizes

Large

Look, I'm in a well!

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

Small

Look, I'm in a well!

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

Close icon

<?php echo TbHtml::closeButton(); ?>

<?php echo TbHtml::closeLink(); ?>

Button groups

Single button group

Multiple button groups

Vertical button groups

Checkbox

Radio

Button dropdown menus

Works with all button sizes

Split button dropdowns

Dropup menus

Navigation

Basic tabs

Basic pills

Disabled state

Stackable

Stacked tabs

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Tabbable nav

Tabbable example

Tabbable in any direction

Tabs on the bottom

Tabs on the left

Tabs on the right

Pagination

Standard pagination

Options

Disable and active states

Sizes

Alignments

Pager

Default example

Aligned links

Optional disabled state

Breadcrumbs

Labels and badges

Labels

Badges

Typography

Hero unit

Hello, world!

Page header

Example page header Subtext for header

Thumbnails Grids of images, videos, text, and more

Default thumbnails

Thumbnails with caption

Thumbnail label

Thumbnail label

Thumbnail label

Different sizes

Tooltips

Four directions

Popovers

Four directions

Alerts Styles for success, warning, and error messages

Default alert

Warning!

Block

Warning!

Contextual alternatives

Error or danger

Success

Information

Progress bars For loading, redirecting, or action status

Basic

Striped

Animated

Stacked

Media object

Default example

Media heading

Media heading

Media heading

Media list

Media heading

Nested media heading

Nested media heading