Basics

Getting to know the html helper

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<?php echo TbHtml::lead('...'); ?>

Emphasis

Small

This line of text is meant to be treated as fine print.

<p><?php echo TbHtml::small('...'); ?></p>

Bold

The following snippet of text is rendered as bold text.

<p>The following snippet of text is <?php echo TbHtml::b('rendered as bold text'); ?>.</p>

Italic

The following snippet of text is rendered as italic text.

<p>The following snippet of text is <?php echo TbHtml::i('rendered as italic text'); ?>.</p>

Emphasis styles

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<?php echo TbHtml::muted('Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.'); ?>
<?php echo TbHtml::em('Etiam porta sem malesuada magna mollis euismod.', array('color' => TbHtml::TEXT_COLOR_WARNING)); ?>
<?php echo TbHtml::em('Donec ullamcorper nulla non metus auctor fringilla.', array('color' => TbHtml::TEXT_COLOR_ERROR)); ?>
<?php echo TbHtml::em('Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.', array('color' => TbHtml::TEXT_COLOR_INFO)); ?>
<?php echo TbHtml::em('Duis mollis, est non commodo luctus, nisi erat porttitor ligula.', array('color' => TbHtml::TEXT_COLOR_SUCCESS)); ?>

Abbrivations

An abbreviation of the word attribute is attr.
An abbreviation of the word attribute is <?php echo TbHtml::abbr('attr', 'attribute'); ?>.

Small

HTML is the best thing since sliced bread.
<?php echo TbHtml::smallAbbr('HTML', 'HyperText Markup Language'); ?> is the best thing since sliced bread.

Blockquotes

Default blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<?php echo TbHtml::quote('...'); ?>

Blockquote options

Naming a source

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<?php echo TbHtml::quote('...', array(
    'source' => 'Someone famous in',
    'cite' => 'Source Title',
)); ?>

Alternative displays

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<?php echo TbHtml::quote('...', array(
    'source' => 'Someone famous in',
    'cite' => 'Source Title',
    'pull' => TbHtml::PULL_RIGHT,
)); ?>

Inline

For example, <section> should be wrapped as inline.
For example, <?php echo TbHtml::code('<section>'); ?> should be wrapped as inline.

Code block

<p>Sample text here...</p>
<?php echo TbHtml::codeBlock('<p>Sample text here...</p>'); ?>

Default styles

Legend
<?php echo TbHtml::beginFormTb(); ?>
    <fieldset>
        <legend>Legend</legend>
        <?php echo TbHtml::label('Label name', 'text'); ?>
        <?php echo TbHtml::textField('text', '', array('placeholder' => 'Type something...')); ?>
        <?php echo TbHtml::checkBox('checkMeOut', false, array('label' => 'Check me out')); ?>
        <?php echo TbHtml::submitButton('Submit'); ?>
    </fieldset>
<?php echo TbHtml::endForm(); ?>

Optional layouts

Search form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_SEARCH); ?>
    <?php echo TbHtml::searchQuery('search'); ?>
    <?php echo TbHtml::submitButton('Submit'); ?>
<?php echo TbHtml::endForm(); ?>

Inline form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_INLINE); ?>
    <?php echo TbHtml::textField('email', '',
        array('placeholder' => 'Email', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
    <?php echo TbHtml::passwordField('password', '',
        array('placeholder' => 'Password', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
    <?php echo TbHtml::checkBox('rememberMe', false, array('label' => 'Remember me')); ?>
    <?php echo TbHtml::submitButton('Sign in'); ?>
<?php echo TbHtml::endForm(); ?>

Horizontal form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_HORIZONTAL); ?>
    <?php echo TbHtml::emailFieldControlGroup('email', '',
        array('label' => 'Email', 'placeholder' => 'Email')); ?>
    <?php echo TbHtml::passwordFieldControlGroup('password', '',
        array('label' => 'Password', 'placeholder' => 'Password')); ?>
    <?php echo TbHtml::checkBoxControlGroup('rememberMe', false, array(
        'label' => 'Remember me',
        'controlOptions' => array('after' => TbHtml::submitButton('Sign in')),
    )); ?>
<?php echo TbHtml::endForm(); ?>

Supported form controls

Inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => 'Text input')); ?>

Text area

<?php echo TbHtml::textArea('text', '', array('rows' => 3)); ?>

Checkboxes and radios

Default (stacked)


<?php echo TbHtml::checkBox('checkBox', '',
    array('label' => 'Option one is this and that—be sure to include why it\'s great')); ?>

<?php echo TbHtml::radioButtonList('optionsRadios', '', array(
    'option1' => 'Option one is this and that—be sure to include why it\'s great',
    'option2' => 'Option two can be something else and selecting it will deselect option one',
)); ?>

Inline checkboxes

<?php echo TbHtml::inlineCheckBoxList('inlineCheckbox', '', array(
    'option1' => '1',
    'option2' => '2',
    'option3' => '3',
)); ?>

Selects


<?php echo TbHtml::dropDownList('dropDown', '', array('1', '2', '3', '4', '5')); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1', '2', '3', '4', '5'), array('multiple' => true)); ?>

Extending form controls

Prepended and appended inputs

Default options

@

.00
<?php echo TbHtml::textField('prependedInput', '',
    array('placeholder' => 'Username', 'prepend' => '@', 'span' => 2)); ?>
<?php echo TbHtml::textField('appendedInput', '',
    array('append' => '.00', 'span' => 2)); ?>

Combined

$.00
<?php echo TbHtml::textField('appendedPrependedInput', '',
    array('prepend' => '$', 'append' => '.00', 'span' => 2)); ?>

Buttons instead of text

<?php echo TbHtml::textField('appendedInputButton', '',
    array('append' => TbHtml::button('Go!'), 'span' => 2)); ?>
<?php echo TbHtml::textField('appendedInputButtons', '',
    array('append' => TbHtml::button('Search') . ' ' . TbHtml::button('Options'), 'span' => 2)); ?>

Button dropdowns

<?php echo TbHtml::textField('appendedDropdownButton', '',
    array('append' => TbHtml::buttonDropdown('Action', array(...)), 'span' => 2)); ?>
<?php echo TbHtml::textField('prependedDropdownButton', '',
    array('prepend' => TbHtml::buttonDropdown('Action', array(...)), 'span' => 2)); ?>
<?php echo TbHtml::textField('appendedPrependedDropdownButton', '', array(
    'prepend' => TbHtml::buttonDropdown('Action', array(...)),
    'append' => TbHtml::buttonDropdown('Action', array(..)),
    'span' => 2,
)); ?>
<?php echo TbHtml::textField('prependedSplitDropdownButton', '',
    array('prepend' => TbHtml::splitButtonDropdown('Action', array(...)))); ?>
<?php echo TbHtml::textField('appendedSplitDropdownButton', '',
    array('append' => TbHtml::splitButtonDropdown('Action', array(...)))); ?>

Search form

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_SEARCH); ?>
<?php echo TbHtml::searchQuery('appendedSearch', '',
    array('append' => TbHtml::submitButton('Search'), 'span' => 2)); ?>
<?php echo TbHtml::searchQuery('prependedSearch', '',
    array('prepend' => TbHtml::submitButton('Search'), 'span' => 2)); ?>
<?php echo TbHtml::endForm(); ?>

Control sizing

Block level inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => '.input-block-level', 'block' => true)); ?>

Relative sizing






<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-mini', 'size' => TbHtml::INPUT_SIZE_MINI)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-small', 'size' => TbHtml::INPUT_SIZE_SMALL)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-medium', 'size' => TbHtml::INPUT_SIZE_MEDIUM)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-large', 'size' => TbHtml::INPUT_SIZE_LARGE)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-xlarge', 'size' => TbHtml::INPUT_SIZE_XLARGE)); ?>
<?php echo TbHtml::textField('text', '', array(
    'placeholder' => '.input-xxlarge', 'size' => TbHtml::INPUT_SIZE_XXLARGE)); ?>

Grid sizing






<?php echo TbHtml::textField('text', '', array('placeholder' => '.span1', 'span' => 1)); ?>
<?php echo TbHtml::textField('text', '', array('placeholder' => '.span2', 'span' => 2)); ?
<?php echo TbHtml::textField('text', '', array('placeholder' => '.span3', 'span' => 3)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 1)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 2)); ?>
<?php echo TbHtml::dropDownList('dropDown', '', array('1'), array('span' => 3)); ?>
<?php echo TbHtml::controls(TbHtml::textField('text', '', array('placeholder' => '.span5', 'span' => 5))); ?>
<?php echo TbHtml::controlsRow(array(
    TbHtml::textField('text', '', array('placeholder' => '.span4', 'span' => 4)),
    TbHtml::textField('text', '', array('placeholder' => '.span1', 'span' => 1)),
)); ?>
...

Uneditable inputs

Some value here
<?php echo TbHtml::uneditableField('uneditable', 'Some value here'); ?>

Form actions

<?php echo TbHtml::formActions(array(
    TbHtml::submitButton('Save changes', array('color' => TbHtml::BUTTON_COLOR_PRIMARY)),
    TbHtml::button('Cancel'),
)); ?>

Help text

Inline help

Inline help text
<?php echo TbHtml::textFieldControlGroup('text', '', array('help' => 'Inline help text')); ?>

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.

<?php echo TbHtml::textFieldControlGroup('text', '',
    array('help' => '...', 'helpOptions' => array('type' => TbHtml::HELP_TYPE_BLOCK))); ?>

Form control states

Invalid inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => 'test@example.com', 'required' => true)); ?>

Disabled inputs

<?php echo TbHtml::textField('text', '', array('placeholder' => 'Disabled input here...', 'disabled' => true)); ?>

Validation states

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with warning',
    'help' => 'Something may have gone wrong',
    'color' => TbHtml::INPUT_COLOR_WARNING,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with error',
    'help' => 'Please correct the error',
    'color' => TbHtml::INPUT_COLOR_ERROR,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with info',
    'help' => 'Username is taken',
    'color' => TbHtml::INPUT_COLOR_INFO,
)); ?>
<?php echo TbHtml::textFieldControlGroup('text', '', array(
    'label' => 'Input with success',
    'help' => 'Woohoo!',
    'color' => TbHtml::INPUT_COLOR_SUCCESS,
)); ?>
<?php echo TbHtml::button('Default'); ?>
<?php echo TbHtml::button('Primary', array('color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Danger', array('color' => TbHtml::BUTTON_COLOR_DANGER)); ?>
<?php echo TbHtml::button('Warning', array('color' => TbHtml::BUTTON_COLOR_WARNING)); ?>
<?php echo TbHtml::button('Success', array('color' => TbHtml::BUTTON_COLOR_SUCCESS)); ?>
<?php echo TbHtml::button('Info', array('color' => TbHtml::BUTTON_COLOR_INFO)); ?>
<?php echo TbHtml::button('Inverse', array('color' => TbHtml::BUTTON_COLOR_INVERSE)); ?>
<?php echo TbHtml::button('Link', array('color' => TbHtml::BUTTON_COLOR_LINK)); ?>

Sizes

<?php echo TbHtml::button('Large button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Large button',
    array('size' => TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Default button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Default button'); ?>
<?php echo TbHtml::button('Small button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_SMALL)); ?>
<?php echo TbHtml::button('Small button',
    array('size' => TbHtml::BUTTON_SIZE_SMALL)); ?>
<?php echo TbHtml::button('Mini button',
    array('color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size' => TbHtml::BUTTON_SIZE_MINI)); ?>
<?php echo TbHtml::button('Mini button',
    array('size' => TbHtml::BUTTON_SIZE_MINI)); ?>

Block

<?php echo TbHtml::button('Block button',
   array('block' => true, 'color' => TbHtml::BUTTON_COLOR_PRIMARY, 'size'=>TbHtml::BUTTON_SIZE_LARGE)); ?>
<?php echo TbHtml::button('Block button',
   array('block' => true, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>

Disabled state

<?php echo TbHtml::button('Primary button',
   array('disabled' => true, 'size'=>TbHtml::BUTTON_SIZE_LARGE, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::button('Button',
   array('disabled' => true, 'size' => TbHtml::BUTTON_SIZE_LARGE)); ?>

Stateful

<?php echo TbHtml::button('Loading state',
    array('loading' => 'Loading...', 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>

Single toggle

<?php echo TbHtml::button('Single toggle',
    array('toggle' => true, 'color' => TbHtml::BUTTON_COLOR_PRIMARY)); ?>
<?php echo TbHtml::imageRounded('holder.js/140x140'); ?>
<?php echo TbHtml::imageCircle('holder.js/140x140'); ?>
<?php echo TbHtml::imagePolaroid('holder.js/140x140'); ?>
  • ICON_GLASS
  • ICON_MUSIC
  • ICON_SEARCH
  • ICON_ENVELOPE
  • ICON_HEART
  • ICON_STAR
  • ICON_STAR_EMPTY
  • ICON_HEART
  • ICON_FILM
  • ICON_TH_LARGE
  • ICON_TH
  • ICON_TH_LIST
  • ICON_OK
  • ICON_REMOVE
  • ICON_ZOOM_IN
  • ICON_ZOOM_OUT
  • ICON_OFF
  • ICON_SIGNAL
  • ICON_COG
  • ICON_TRASH
  • ICON_HOME
  • ICON_FILE
  • ICON_TIME
  • ICON_ROAD
  • ICON_DOWNLOAD_ALT
  • ICON_DOWNLOAD
  • ICON_UPLOAD
  • ICON_INBOX
  • ICON_PLAY_CIRCLE
  • ICON_REPEAT
  • ICON_REFRESH
  • ICON_LIST_ALT
  • ICON_LOCK
  • ICON_FLAG
  • ICON_HEADPHONES
  • ICON_VOLUME_OFF
  • ICON_VOLUME_DOWN
  • ICON_VOLUME_UP
  • ICON_QRCODE
  • ICON_BARCODE
  • ICON_TAG
  • ICON_TAGS
  • ICON_BOOK
  • ICON_BOOKMARK
  • ICON_PRINT
  • ICON_CAMERA
  • ICON_FONT
  • ICON_BOLD
  • ICON_ITALIC
  • ICON_TEXT_HEIGHT
  • ICON_TEXT_WIDTH
  • ICON_ALIGN_LEFT
  • ICON_ALIGN_CENTER
  • ICON_ALIGN_RIGHT
  • ICON_ALIGN_JUSTIFY
  • ICON_LIST
  • ICON_INDENT_LEFT
  • ICON_INDENT_RIGHT
  • ICON_FACETIME_VIDEO
  • ICON_PICTURE
  • ICON_PENCIL
  • ICON_MAP_MARKER
  • ICON_ADJUST
  • ICON_TINT
  • ICON_EDIT
  • ICON_SHARE
  • ICON_CHECK
  • ICON_MOVE
  • ICON_STEP_BACKWARD
  • ICON_FAST_FORWARD
  • ICON_BACKWARD
  • ICON_PLAY
  • ICON_PAUSE
  • ICON_STOP
  • ICON_FORWARD
  • ICON_FAST_FORWARD
  • ICON_STEP_BACKWARD
  • ICON_EJECT
  • ICON_CHEVRON_LEFT
  • ICON_CHEVRON_RIGHT
  • ICON_PLUS_SIGN
  • ICON_MINUS_SIGN
  • ICON_REMOVE_SIGN
  • ICON_OK_SIGN
  • ICON_QUESTION_SIGN
  • ICON_INFO_SIGN
  • ICON_SCREENSHOT
  • ICON_REMOVE_CIRCLE
  • ICON_OK_CIRCLE
  • ICON_BAN_CIRCLE
  • ICON_ARROW_LEFT
  • ICON_ARROW_RIGHT
  • ICON_ARROW_UP
  • ICON_ARROW_DOWN
  • ICON_SHARE_ALT
  • ICON_RESIZE_FULL
  • ICON_RESIZE_SMALL
  • ICON_PLUS
  • ICON_MINUS
  • ICON_ASTERISK
  • ICON_EXCLAMATION_SIGN
  • ICON_GIFT
  • ICON_LEAF
  • ICON_FIRE
  • ICON_EYE_OPEN
  • ICON_EYE_CLOSE
  • ICON_WARNING_SIGN
  • ICON_PLANE
  • ICON_CALENDAR
  • ICON_RANDOM
  • ICON_COMMENT
  • ICON_MAGNET
  • ICON_CHEVRON_UP
  • ICON_CHEVRON_DOWN
  • ICON_RETWEET
  • ICON_SHOPPING_CART
  • ICON_FOLDER_CLOSE
  • ICON_FOLDER_OPEN
  • ICON_RESIZE_VERTICAL
  • ICON_RESIZE_HORIZONTAL
  • ICON_HDD
  • ICON_BULLHORN
  • ICON_BELL
  • ICON_CERTFICATE
  • ICON_THUMBS_UP
  • ICON_THUMBS_DOWN
  • ICON_HAND_RIGHT
  • ICON_HAND_LEFT
  • ICON_HAND_UP
  • ICON_HAND_DOWN
  • ICON_CIRCLE_ARROW_RIGHT
  • ICON_CIRCLE_ARROW_LEFT
  • ICON_CIRCLE_ARROW_UP
  • ICON_CIRCLE_ARROW_DOWN
  • ICON_GLOBE
  • ICON_WRENCH
  • ICON_TASKS
  • ICON_FILTER
  • ICON_BRIEFCASE
  • ICON_FULLSCREEN

How to use

<?php echo TbHtml::icon(TbHtml::ICON_GLASS); ?>

Icon examples

Coming soon!