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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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
2MarkOtto
3JacobThornton
4MarkOtto
5StuDent
6JacobThornton
7StuDent
8StuDent
9StuDent
10StuDent
11JacobThornton
12StuDent
13StuDent
14JacobThornton
15MarkOtto
16MarkOtto
17JacobThornton
18JacobThornton
19MarkOtto
20MarkOtto
21StuDent
22JacobThornton
23JacobThornton
24JacobThornton
25MarkOtto
26MarkOtto
27StuDent
28StuDent
29JacobThornton
30MarkOtto
31StuDent
32StuDent
33StuDent
34JacobThornton
35StuDent
36StuDent
37MarkOtto
38JacobThornton
39MarkOtto
40MarkOtto
41JacobThornton
42StuDent
43MarkOtto
44StuDent
45JacobThornton
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
 
<?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
46MarkOtto
47JacobThornton
48MarkOtto
49JacobThornton
50JacobThornton
Displaying 46-50 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();
?>