Body copy

Lead body copy

Make a paragraph stand out by adding .lead.

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

        

<?php
echo BsHtml::lead('Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
        Duis mollis, est non commodo luctus.'
);
?>

Built with Less

The typographic scale is based on two LESS variables in variables.less: @font-size-base and @line-height-base. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

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


<?php
echo BsHtml::small('This line of text is meant to be treated as fine print.');
?>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.


<?php
echo BsHtml::bold('rendered as bold text.');
?>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.


<?php
echo BsHtml::italics('rendered as italicized text');
?>

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.


<?php
echo BsHtml::emphasis('Left aligned text.', array(
    
'color' => BsHtml::TEXT_ALIGN_LEFT
));
?>
<?php
echo BsHtml::emphasis('Center aligned text.', array(
    
'color' => BsHtml::TEXT_ALIGN_CENTER
));
?>
<?php
echo BsHtml::emphasis('Right aligned text.', array(
    
'color' => BsHtml::TEXT_ALIGN_RIGHT
));
?>

Emphasis classes

Convey meaning through color with a handful of emphasis utility classes.

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.

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


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

Abbreviations

Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Basic abbreviation

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element.

An abbreviation of the word attribute is atrr.


<?php
echo BsHtml::emphasis('An abbreviation of the word attribute is ' BsHtml::abbr('atrr''attribute') . '.');
?>

Initialism

Add .initialism to an abbreviation for a slightly smaller font-size.

HTML is the best thing since sliced bread


 <?php
echo BsHtml::abbr('HTML''HyperText Markup Language', array(
    
'type' => BsHtml::TEXT_ABBR_INITIALISM
));
?>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

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


<?php
echo BsHtml::quote('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.');
?>

Blockquote options

Style and content changes for simple variations on a standard <blockquote>.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

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

Someone famous in Source Title

<?php
echo BsHtml::quote('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.', array(
    
'small' => 'Someone famous in',
    
'cite' => 'Source Title'
));
?>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

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

Someone famous in Source Title

<?php
echo BsHtml::quote('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.', array(
    
'small' => 'Someone famous in',
    
'cite' => 'Source Title',
    
'pull' => BsHtml::PULL_RIGHT
));
?>

Inline

Wrap inline snippets of code with <code>.

For example, Sample text here... should be wrapped as inline.
            
<?php
echo BsHtml::code(BsHtml::italics('Sample text here...'));
?>

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

Sample text here...

            
<?php
echo BsHtml::codeBlock(BsHtml::emphasis('Sample text here...'));
?>

You may optionally add the .pre-scrollable class, which will set a max-height of 350px and provide a y-axis scrollbar.

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

            
<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'id' =>  uniqid('table_'),
    
'dataProvider' =>  $gridDataProvider,
    
'columns' =>  $gridColumns
));
?>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $gridDataProvider ,
    
'id' => uniqid('table_'),
    
    
'columns' => $gridColumns ,
    
'type' => BsHtml::GRID_TYPE_STRIPED
));
?>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $gridDataProvider ,
    
'id' => uniqid('table_'),
    
    
'columns' => $gridColumns ,
    
'type' => BsHtml::GRID_TYPE_BORDERED
));
?>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $gridDataProvider ,
    
'id' => uniqid('table_'),
    
    
'columns' => $gridColumns ,
    
'type' => BsHtml::GRID_TYPE_HOVER
));
?>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding in half.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $gridDataProvider ,
    
'id' => uniqid('table_'),
    
    
'columns' => $gridColumns ,
    
'type' => BsHtml::GRID_TYPE_CONDENSED
));
?>

Contextual classes

Use contextual classes to color table rows or individual cells.

idfirstNamelastName
1MarkOtto
2StuDent
3MarkOtto
4MarkOtto
5JacobThornton
6JacobThornton
7StuDent
8JacobThornton
9MarkOtto
10JacobThornton
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
16JacobThornton
17MarkOtto
18MarkOtto
19MarkOtto
20MarkOtto
21MarkOtto
22JacobThornton
23StuDent
24MarkOtto
25JacobThornton
26MarkOtto
27JacobThornton
28MarkOtto
29JacobThornton
30JacobThornton
31MarkOtto
32JacobThornton
33JacobThornton
34StuDent
35StuDent
36MarkOtto
37MarkOtto
38MarkOtto
39StuDent
40MarkOtto
41StuDent
42MarkOtto
43StuDent
44JacobThornton
45StuDent
46MarkOtto
47StuDent
48JacobThornton
49MarkOtto
50MarkOtto
 
<?php
$grid_DataProvider 
= new CArrayDataProvider($provArray, array(
    
'keyField' => 'id'// PRIMARY KEY
    
'id' => 'buyers_list',
    
'sort' => array(
        
'attributes' => array(
            
'id'
        
)
    ),
    
'pagination' => array(
        
'pageSize' => 50
    
)
));
$col               = array(
    array(
        
'name' => 'id',
        
'cssClassExpression' => '$data->cssClass',
        
'value' => 'BsHtml::badge($data->id)',
        
'type' => 'raw'
    
),
    array(
        
'name' => 'firstName',
        
'cssClassExpression' => '$data->cssClass',
        
'value' => '$data->firstName',
        
'type' => 'raw'
    
),
    array(
        
'name' => 'lastName',
        
'cssClassExpression' => '$data->cssClass',
        
'value' => '$data->lastName',
        
'type' => 'raw'
    
)
);
?>
<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $grid_DataProvider ,
    
'id' => uniqid('table_'),
    
'template' => '{items}',
    
'columns' => $col ,
    
'type' => BsHtml::GRID_TYPE_CONDENSED  ' ' BsHtml ::GRID_TYPE_BORDERED ' ' BsHtml ::GRID_TYPE_STRIPED
));
?>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

idfirstNamelastName
11JacobThornton
12JacobThornton
13StuDent
14JacobThornton
15MarkOtto
Displaying 11-15 of 50 results.

<?php
$this
->widget('bootstrap.widgets.BsGridView', array(
    
'dataProvider' => $gridDataProvider ,
    
'id' => uniqid('table_'),
    
    
'columns' => $gridColumns ,
    
'type' => BsHtml::GRID_TYPE_RESPONSIVE
));
?>

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Legend

<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
//        'layout' => BsHtml::FORM_LAYOUT_HORIZONTAL,
    
'enableAjaxValidation' => true,
    
'id' => 'user_form',
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<fieldset>
    <legend>Legend</legend>
<?php
echo $form->textFieldControlGroup($model'username');
?>
<?php
echo $form->passwordFieldControlGroup($model'password');
?>
<?php
echo $form->emailFieldControlGroup($model'email');
?>
<?php
echo BsHtml::submitButton('Submit', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY
));
?>
</fieldset>
<?php
$this
->endWidget();
?>

Inline form

Add .form-inline for left-aligned and inline-block controls for a compact layout.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Legend

<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'layout' => BsHtml::FORM_LAYOUT_INLINE,
    
'enableAjaxValidation' => true,
    
'id' => 'user_form_inline',
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<fieldset>
    <legend>Legend</legend>
    <?php
echo $form->textFieldControlGroup($model'username');
?>
   <?php
echo $form->passwordFieldControlGroup($model'password');
?>
   <?php
echo $form->emailFieldControlGroup($model'email');
?>
   <?php
echo BsHtml::submitButton('Submit', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY
));
?>
</fieldset>
<?php
$this
->endWidget();
?>

Horizontal form

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form. Doing so changes .form-groups to behave as grid rows, so no need for .row.

Legend

<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'layout' => BsHtml::FORM_LAYOUT_HORIZONTAL,
    
'enableAjaxValidation' => true,
    
'id' => 'user_form_horizontal',
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<fieldset>
<legend>Legend</legend>
<?php
echo $form->textFieldControlGroup($model'username');
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'prepend' => BsHtml::icon(BsHtml::GLYPHICON_USER)
));
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'append' => BsHtml::icon(BsHtml::GLYPHICON_USER)
));
?>
<?php
echo $form->passwordFieldControlGroup($model'password');
?>
<?php
echo $form->emailFieldControlGroup($model'email');
?>
<?php
echo $form->dropDownListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3',
    
'4',
    
'5'
), array(
    
'empty' => 'Something ...'
));
?>
<?php
echo $form->dropDownListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3',
    
'4',
    
'5'
), array(
    
'multiple' => true
));
?>

<?php
echo $form->checkBoxControlGroup($model'profile');
?>
<?php
echo $form->inlineCheckBoxListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3'
));
?>
<?php
echo $form->checkBoxListControlGroup($model'profile', array(
    
"Option one is this and that—be sure to include why it's great"
));
?>

<?php
echo $form->radioButtonControlGroup($model'profile');
?>
<?php
echo $form->radioButtonListControlGroup($model'profile', array(
    
'Option one is this and that—be sure to include why it\'s great',
    
'Option two can is something else and selecting it will deselect option one'
));
?>
</fieldset>
<?php
echo BsHtml::formActions(array(
    
BsHtml::submitButton('Submit', array(
        
'color' => BsHtml::BUTTON_COLOR_PRIMARY
    
))
));
?>

<?php
$this
->endWidget();
?>

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Type declaration required

Inputs will only be fully styled if their type is properly declared.











<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<?php
echo $form->textField($model'username', array(
    
'placeholder' => 'textField'
));
?>
   
<?php
echo $form->passwordField($model'username', array(
    
'placeholder' => 'passwordField'
));
?>
   
<?php
echo $form->numberField($model'username', array(
    
'placeholder' => 'numberField'
));
?>
   
<?php
echo $form->emailField($model'username', array(
    
'placeholder' => 'emailField'
));
?>
   
<?php
echo $form->urlField($model'username', array(
    
'placeholder' => 'urlField'
));
?>
   
<?php
echo $form->rangeField($model'username', array(
    
'placeholder' => 'rangeField'
));
?>
   
<?php
echo $form->dateField($model'username', array(
    
'placeholder' => 'dateField'
));
?>
   
<?php
echo $form->fileField($model'username', array(
    
'placeholder' => 'fileField'
));
?>
   
<?php
$this
->endWidget();
?>

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.

      
<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<?php
echo $form->textArea($model'username');
?>
<?php
$this
->endWidget();
?>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<?php
echo $form->checkBoxControlGroup($model'profile');
?>
<?php
echo $form->inlineCheckBoxListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3'
));
?>
<?php
echo $form->checkBoxListControlGroup($model'profile', array(
    
"Option one is this and that—be sure to include why it's great"
));
?>

<?php
echo $form->radioButtonControlGroup($model'profile');
?>
<?php
echo $form->radioButtonListControlGroup($model'profile', array(
    
'Option one is this and that—be sure to include why it\'s great',
    
'Option two can is something else and selecting it will deselect option one'
));
?>
<?php
$this
->endWidget();
?>

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Link functionality of <a> not impacted

This class will only change the appearance of <a class="btn btn-default"> buttons, not their functionality. Use custom JavaScript to disable links here.

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example bs-example-control-sizing'
    
)
));
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'disabled' => true
));
?>

<?php
$this
->endWidget();
?>

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'layout' => BsHtml::FORM_LAYOUT_HORIZONTAL,
    
'htmlOptions' => array(
        
'class' => 'bs-example bs-example-control-sizing'
    
)
));
?>
   <?php
echo $form->textFieldControlGroup($model'username', array(
    
'controlOptions' => array(
        
'class' => 'has-success col-lg-10'
    
)
));
?>
   <?php
echo $form->textFieldControlGroup($model'username', array(
    
'groupOptions' => array(
        
'class' => 'has-success'
    
)
));
?>
   <?php
echo $form->textFieldControlGroup($model'username', array(
    
'controlOptions' => array(
        
'class' => 'has-warning col-lg-10'
    
)
));
?>
   <?php
echo $form->textFieldControlGroup($model'username', array(
    
'controlOptions' => array(
        
'class' => 'has-error col-lg-10'
    
)
));
?>
<?php
$this
->endWidget();
?>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create larger or smaller form controls that match button sizes.


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example bs-example-control-sizing'
    
)
));
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'class' => BsHtml::INPUT_SIZE_LG
));
?>
<?php
echo $form->textFieldControlGroup($model'username');
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'class' => BsHtml::INPUT_SIZE_SM
));
?>
<?php
echo $form->dropDownListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3',
    
'4',
    
'5'
), array(
    
'empty' => 'Something ...',
    
'class' => BsHtml::INPUT_SIZE_LG
));
?>
<?php
echo $form->dropDownListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3',
    
'4',
    
'5'
), array(
    
'empty' => 'Something ...'
));
?>
<?php
echo $form->dropDownListControlGroup($model'profile', array(
    
'1',
    
'2',
    
'3',
    
'4',
    
'5'
), array(
    
'empty' => 'Something ...',
    
'class' => BsHtml::INPUT_SIZE_SM
));
?>
<?php
$this
->endWidget();
?>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example bs-example-control-sizing'
    
)
));
?>
<div class="row">
    <?php
echo $form->textFieldControlGroup($model'username', array(
    
'placeholder' => 'col-lg-2',
    
'controlOptions' => array(
        
'class' => 'col-lg-12'
    
),
    
'groupOptions' => array(
        
'class' => 'col-lg-2'
    
)
));
?>
   <?php
echo $form->textFieldControlGroup($model'username', array(
    
'placeholder' => 'col-lg-6',
    
'controlOptions' => array(
        
'class' => 'col-lg-12'
    
),
    
'groupOptions' => array(
        
'class' => 'col-lg-6'
    
)
));
?>
</div>
<?php
$this
->endWidget();
?>

Help text

Block level help text for form controls.

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


<?php
$form 
$this->beginWidget('bootstrap.widgets.BsActiveForm', array(
    
'enableAjaxValidation' => true,
    
'id' => uniqid('user_'),
    
'htmlOptions' => array(
        
'class' => 'bs-example'
    
)
));
?>
<?php
echo $form->textFieldControlGroup($model'username', array(
    
'placeholder' => '',
    
'help' => 'A block of help text that breaks onto a new line and may extend beyond one line.'
));
?>
<?php
$this
->endWidget();
?>

Options

Use any of the available button classes to quickly create a styled button.

       
<?php
echo BsHtml::button('Primary', array(
    
'color' => BsHtml ::BUTTON_COLOR_PRIMARY
));
?>
   <?php
echo BsHtml ::button('Danger', array(
    
'color' => BsHtml ::BUTTON_COLOR_DANGER
));
?>
   <?php
echo BsHtml ::button('Warning', array(
    
'color' => BsHtml ::BUTTON_COLOR_WARNING
));
?>
   <?php
echo BsHtml ::button('Success', array(
    
'color' => BsHtml ::BUTTON_COLOR_SUCCESS
));
?>
   <?php
echo BsHtml ::button('Info', array(
    
'color' => BsHtml ::BUTTON_COLOR_INFO
));
?>
   <?php
echo BsHtml ::button('Default');
?>
   <?php
echo BsHtml ::button('Link', array(
    
'color' => BsHtml ::BUTTON_COLOR_LINK
));
?>

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.


<?php
echo BsHtml::button('Large Button', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY ,
    
'size' => BsHtml::BUTTON_SIZE_LARGE
));
?>
<?php
echo BsHtml ::button('Large Button', array(
    
'size' => BsHtml::BUTTON_SIZE_LARGE
));
?>
<?php
echo BsHtml ::button('Default button', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY
));
?>
<?php
echo BsHtml ::button('Default button');
?>


<?php
echo BsHtml ::button('Small Button', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY ,
    
'size' => BsHtml::BUTTON_SIZE_SMALL
));
?>
<?php
echo BsHtml ::button('Small Button', array(
    
'size' => BsHtml::BUTTON_SIZE_SMALL
));
?>


<?php
echo BsHtml::button ('Extra Small Button', array(
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY ,
    
'size' => BsHtml::BUTTON_SIZE_MINI
));
?>
<?php
echo BsHtml ::button('Extra small button', array(
    
'size' => BsHtml ::BUTTON_SIZE_MINI
));
?>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

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

Disabled state

Make buttons look unclickable by fading them back 50%.

Button element

Add the disabled attribute to <button> buttons.


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

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link


<?php
echo BsHtml::linkButton('Primary link', array(
    
'disabled' => true ,
    
'size' => BsHtml::BUTTON_SIZE_LARGE ,
    
'color' => BsHtml::BUTTON_COLOR_PRIMARY
));
?>
<?php
echo BsHtml ::linkButton('Link', array(
    
'disabled' => true ,
    
'size' => BsHtml::BUTTON_SIZE_LARGE
));
?>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality not impacted

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

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Link

<?php
echo BsHtml::linkButton('Link');
?>
<?php
echo BsHtml::button ('Button');
?>
<?php
echo BsHtml::inputButton ('Input');
?>
<?php
echo BsHtml::inputSubmitButton ('Submit', array(
    
'type' => 'input'
));
?>
<?php
echo BsHtml::submitButton ('Submit Button', array(
    
'type' => 'input'
));
?>

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a Firefox bug that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.


<?php
echo BsHtml::imageRounded('holder.js/140x140');
?>
<?php
echo BsHtml::imageCircle('holder.js/140x140');
?>
<?php
echo BsHtml::imageThumbnail('holder.js/140x140');
?>

Responsive images

Looking for how to make images more responsive?


<?php
echo BsHtml::imageResponsive('holder.js/1200x450');
?>

Close icon

Use the generic close icon for dismissing content like modals and alerts.


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