Bootstrap Component

Create Bootstrap grids, tables, forms, buttons, dropdowns, groups, navs, breadcrumbs, pagination, panels, accordions, carousels, etc ... all without touching a single div!

use BootPress\Bootstrap\v3\Component as Bootstrap;

Packagist License MIT HHVM Tested PHP 7 Supported Build Status Code Climate Test Coverage


The Bootstrap Component allows you to easily generate Bootstrap tables, navs, pagination, buttons, dropdowns, accordions, carousels ... you name it - all without touching a single div! Of course, if you like spelling it all out then there is really no need for this class. It is simply here to help make your HTML more readable, easy to update, and less buggy.

CSS

private object $table ;

@var

A BootPress\Bootstrap\Table instance that extends the BootPress Table Component with the following method:

public string open ( [ string|array $vars [, string $caption ]] )

Create a <table>.

@param $vars

<table> attributes. Any 'responsive', 'bordered', 'striped', 'hover', and/or 'condensed' class will be prefixed with a 'table-...', and include the 'table' class as well.

@param $caption

Table <caption>.

@example
echo $bp->table->open('class=responsive striped');
    echo $bp->table->head();
    echo $bp->table->cell('', 'One');
    echo $bp->table->row();
    echo $bp->table->cell('', 'Two');
    echo $bp->table->foot();
    echo $bp->table->cell('', 'Three');
echo $bp->table->close();
Document Your Code

public string row ( string $size , array $columns )

This method works in conjunction with $bp->col() below. It makes things a little less verbose, but much easier to edit, modify, and see at a glance what in the world is going on.

@param $size

This value can be either 'xs' < 768px, 'sm' >= 768px, 'md' >= 992 , or 'lg' >= 1200. This is the point at which your grid will break, if no smaller size is indicated. With this method you can indicate multiple sizes by simply inserting another argument. All of your $size's must correspond with the values given in the $bp->col()'s or $columns below.

@param $columns

An array of $bp->col()'s. This argument does not need to be the second one in line. It is merely the last one given.

@example
echo $bp->row('sm', array(
    $bp->col(3, 'left'),
    $bp->col(6, 'center'),
    $bp->col(3, 'right'),
));

public array col ( mixed $number , string $column )

This is a helper method for $bp->row() above. It only returns it's own arguments, but it helps to keep things straight. Including arrays within arrays can get to be a little unwieldly, just take a look at the $bp->media() method.

@param $number

This parameter must correspond with it's parent $bp->row($size). It can be an integer between 1 and 12, as long as all of the $bp->col()'s respective numbers add up to 12 or less. To get fancy you can add a space, then an 'offset-', 'push-', or 'pull-' followed by the number of columns that you would like to affect. All of these will be preceded by col-{$size}-.... To include additional classes just keep on going with a space in between each.

@param $column

The actual html content you would like to be placed in this column.

@return

The parameters passed to it.

@example
echo $bp->row('sm', 'md', 'lg', array(
    $bp->col(12, '9 push-3', '10 push-2', 'content'),
    $bp->col('6 offset-3 clearfix', '3 pull-9', '2 pull-10', 'sidebar'),
));

public string lister ( string $tag , array $list )

This assists you in making Ordered, Unordered, and Definition lists. It is especially useful when you are nesting lists within lists. Your code almost looks exactly like you would expect to see it on the big screen. It would have been nice if we could have named this method 'list', but someone has taken that already.

@param $tag

Either an 'ol' (Ordered list), 'ul' (Unordered list), or a 'dl' (Definition list). You can add any other classes you like (or not), but the special ones that Bootstrap has blessed us with are:

  • 'list-inline' - For an unordered list to be displayed horizontally.
  • 'list-unstyled' - For an unordered list to be unbulleted.
  • 'dl-horizontal' - For a definition to be displayed beside it's title rather than below.
@param $list

For Ordered and Unordered lists this is an array($li, $li, ...), and to nest another list just make the $li another array.

For Definition Lists this is an array($title => $definition, ...). If you have multiple $definition's, then just make $title an array of them.

@example
echo $bp->lister('ol', array(
    'Coffee',
    'Tea' => array(
        'Black tea',
        'Green tea',
    ),
    'Milk',
));

echo $bp->lister('ul list-inline', array(
    'Coffee',
    'Tea',
    'Milk',
));

echo $bp->lister('dl dl-horizontal', array(
    'Coffee' => array(
        'Black hot drink',
        'Caffeinated beverage',
    ),
    'Milk' => 'White cold drink',
));

public string search ( string $url [, array $form ] )

This will assist you in creating a search bar for your site.

@param $url

This is the url that you would like the search term to be sent to

@param $form

To customize the form, you can submit an array with any of the following keys:

  • 'name' - The name of the input field. The default is 'search'.
  • 'placeholder' - Subtle text to indicate what sort of field it is. The default is 'Search'.
  • 'button' - The button itself with tags and all, or just a name. The default is $bp->icon('search').
    • If you don't want a button at all then just give this an empty value.
  • 'class' - Any special class(es) to give the <form> tag. The default is 'form-horizontal'.
  • 'size' - Either 'sm', 'md' (the default), or 'lg'.
@example
echo $bp->search('http://example.com');

public object form ( string $name [, string $method = 'post' ] )

Create a Bootstrapped good looking form.

@param $name

The name of your form.

@param $method

How you would like the form to be sent ie. 'post' or 'get'.

@return

A BootPress\Bootstrap\Form instance that extends the BootPress Form Component with the following methods:

public message ( string $status , string $message )

Display a message to your user after $form->eject()ing them. The Bootstrap alert status message will be displayed at the top of the form when you return $form->header().

@param $status

Either 'success', 'info', 'warning', or 'danger'. If this is 'html', then the $message will be delivered as is.

@param $message

The message you would like to get across to your user. <h1-6> headers and <a> links will be appropriately classed.

@example
if ($vars = $form->validator->certified()) {
    $form->message('info', 'Good job, you are doing great!');
    $form->eject();
}

public size ( string $input )

Supersize or undersize your input fields.

@param $input

Either 'lg' (large), 'md' (medium - the default), or 'sm' (small).

@example
$form->size('lg');

public align ( [ string $direction = 'horizontal' [, string $collapse = 'sm' [, int $indent = 2 ]]] )

Utilize any Bootstrap form style.

@param $direction

The options are:

  • 'collapse' - This will display the form prompt immediately above the field.
  • 'inline' - All of the fields will be inline with each other, and the form prompts will be removed.
  • 'horizontal' - Vertically aligns all of the fields with the prompt immediately preceding, and right aligned.
@param $collapse

Either 'xs', 'sm', 'md', or 'lg'. This is the breaking point so to speak for a 'horizontal' form. It is the device size on which the form will 'collapse'.

@param $indent

The number of columns (up to 12) that you would like to indent the field in a 'horizontal' form.

@example
$form->align('collapse');

public prompt ( string $place , string $html [, mixed $required = false ] )

This is to add html tags, or semicolons, or asterisks, or whatever you would like to all of the form's prompts.

@param $place

Either 'info', 'append', or 'prepend' to the prompt. You only have one shot at each.

@param $html

Whatever you would like to add. For 'info', this will be the icon class you want to use.

@param $required

If $place == 'prepend' and this is anything but (bool) false, then the $html will only be prepended if the $form->validator->required('field').

@example
$form->prompt('prepend', '<font color="red">*</font> ', 'required'); // If the field is required it will add a red asterisk to the front.

$form->prompt('append', ':'); // Adds a semicolon to all of the prompts.

public string header ( [ array $validate ] )

Creates the <form>, invokes the Validator jQuery, and displays your message (if any).

@param $validate

Override the custom validator settings we have created for Bootstrap

@example
echo $form->header();

public string checkbox ( string $field [, array $attributes [, mixed $inline = false ]] )

Creates checkboxes from the $form->menu($field) you set earlier.

@param $field

The checkbox's name.

@param $attributes

Anything else you would like to add besides the 'name', 'value', 'checked', and data validation attributes.

@param $inline

This tells us if you want the checkboxes to be inline (any value but false), or not (false).

@return

A checkbox <label><input type="checkbox" ...></label> html tag.

@example
$form->menu('remember', array('Y'=>'Remember Me'));
$form->validator->set('remember', 'yesNo');

echo $form->checkbox('remember');

public string radio ( string $field [, array $attributes [, mixed $inline = false ]] )

Creates radio buttons from the $form->menu($field) you set earlier.

@param $field

The radio button's name.

@param $attributes

Anything else you would like to add besides the 'name', 'value', 'checked', and data validation attributes.

@param $inline

This tells us if you want the radio buttons to be inline (any value but false), or not (false).

@return

Radio <label><input type="radio" ...></label> html tags.

@example
$form->menu('gender', array('M'=>'Male', 'F'=>'Female'));
$form->validator->set('gender', 'required|inList');

echo $form->radio('gender');

public string group ( string|array $prepend , string|array $append , string $input )

Group an input field with addons. You can prepend and/or append a $bp->button(...), $bp->icon(...), or just a string of text. To prepend or append multiple elements, then make it an array($html, ...) of addons.

@param $prepend

An element to place before the $input.

@param $append

An element to place after the $input.

@param $input

The form field to wrap.

@return

A <div class="input-group">...</div> html string.

@example
echo $form->group('$', '.00', $form->text('amount'));

public string field ( string|array $prompt , string $input [, string $error = null ] )

Adds a (properly formatted) $prompt to your $input field, and manages any error messages.

@param $prompt

For the $input field. If you want to include additional info that will appear when clicked or hovered over, then you can make this an array($prompt => $info). To customize the icon used, set $form->prompt('info', 'fa fa-info-circle').

@param $input

A form field, or help block, etc.

@param $error

An optional error to override, and include with the field.

@return

A <div class="form-group">...</div> html string.

@example
echo $form->field('Amount', $form->group('$', '.00', $form->text('amount')));

public string submit ( [ string $submit = 'Submit' [, string $reset ]] )

Quickly adds a submit button to your form.

@param $submit

What you would like the submit button to say. If it starts with a '<', then we assume you have spelled it all out for us.

@param $reset

This will add a reset button if you give it a value, and if it starts with a '<' then it can be whatever you want it to be. You can keep adding args until you run out of ideas for buttons to include.

@return

A <div class="form-group">...</div> html string with buttons.

@example
echo $form->submit();
Document Your Code
@example
$form = $bp->form('sign_in');

$form->menu('remember', array('Y' => 'Remember me'));

$form->validator->set(array(
    'email' => 'required|email',
    'password' => 'required|minLength[5]|noWhiteSpace',
    'remember' => 'yesNo',
));

if ($vars = $form->validator->certified()) {
    $form->message('info', 'Good job, you are doing great!');
    $form->eject();
}

$form->size('lg'); // oversize the inputs
$form->align('collapse'); // default is horizontal

echo $form->header();
echo $form->fieldset('Sign In', array(
    $form->field('Email address', $form->group($bp->icon('user'), '', $form->text('email'))),
    $form->field('Password', $form->group($bp->icon('lock'), '', $form->password('password'))),
    $form->field('', $form->checkbox('remember'),
    $form->submit(),
));
echo $form->close();
Document Your Code

Components

private object $navbar ;

@var

A BootPress\Bootstrap\Navbar instance with the following methods:

public string open ( mixed $brand [, string $align [, mixed $inverse = false ]] )

Create a new navbar.

@param $brand

The name of your website. If this is a string then it will automatically link to your $page->url['base']. If you want to override that, then make this an array($brand => $link).

@param $align

Either 'top', 'bottom', or 'static' if you want to fix the alignment. If you're just trying to get to the next arg then you can declare 'inverse' here, and we'll know what you're talking about.

@param $inverse

If this is anything but false (eg. 'inverse'), then we will display the inverted or alternate navbar.

@example
echo $bp->navbar->open(array('Website' => 'http://example.com'));

public string menu ( array $links [, array $options ] )

Create a menu of links across your navbar.

@param $links

An array($name => $href, ...) of links. If $href is an array unto itself, then it will be turned into a dropdown menu with the same header and divider rules applied as with buttons.

@param $options

The options available here are:

  • 'active' => $name, $href, 'url', 'urlquery', or an integer (starting from 1).
  • 'disabled' => $name, $href, or an integer (starting from 1).
  • 'pull' => 'left' (default) or 'right'.
@example
echo $bp->navbar->menu(array(
    'Home' => '#',
    'Work' => '#',
    'Dropdown' => array(
        'Action' => '#',
        'More' => '#',
    ),
), array(
    'active' => 'Home',
));

public string button ( string $class , string $name [, array $options ] )

Exactly the same as $bp->button(), except that it will receive a 'navbar-btn' class.

@param $class

To pull it one way or the other, you can add the class 'navbar-right or 'navbar-left'.

@param $name

The text of your button.

@param $options

You can also pull the button here by adding array('pull' => 'right') or array('pull' => 'left').

@example
echo $bp->navbar->button('primary', 'Sign In', array(
    'pull' => 'right',
));

public string search ( string $url [, array $form ] )

Exactly the same as $bp->search(), except the <form> will receive a 'navbar-form navbar-right' class.

@param $url

Where to send the search term.

@param $form

You can pull the search form left by adding array('class' => 'navbar-form navbar-left').

@example
echo $bp->navbar->search('http://example.com', array(
    'button' => false,
));

public string text ( string $string [, string $pull = false ] )

Add a string of text to your navbar.

@param $string

The message you would like to get across. It will be wrapped in a <p class="navbar-text"> tag, and any <a>'s will be classed with a 'navbar-link'.

@param $pull

Either 'left' or 'right'.

@example
echo $bp->navbar->text('You <a href="#">link</a> me');

public string close ( void )

Add the final </div>'s and </nav>.

@example
echo $bp->navbar->close();
Document Your Code

private object $pagination ;

@var

A BootPress\Bootstrap\Pagination instance that extends the BootPress Pagination Component with the 'bootstrap' defaults.

public string icon ( string $symbol [, string $prefix = 'glyphicon' [, string $tag = 'i' ]] )

Create an icon without the verbosity.

@param $symbol

The icon you would like to display without the base and icon class prefix.

@param $prefix

The base and icon class prefix. The default is a Bootstrap icon, but this can be used with any icon font by simply entering their prefix value here.

@param $tag

The tag to use for displaying your font. Everyone uses the <i> tag, so that is the default. If $prefix == 'glyphicon' (the default for Bootstrap) then we will use a span element. Why? I don't know, but since v.2 that seems to be what they prefer to use now. If you want to style an icon further then you can do so here. eg. 'i style="font-size:16px;"'.

@example
echo $bp->icon('asterisk');

public string button ( string $class , string $name [, array $options ] )

A button by itself is easy enough, but when you start including dropdowns and groups your markup can get ugly quick. Follow the examples. We'll start simple and go from there.

@param $class

The classes: 'xs', 'sm', 'lg', 'block', 'default', 'primary', 'success', 'info', 'warning', 'danger', and 'link' will all be prefixed with 'btn-...', and we include the 'btn' class too. Notice how we left out the 'btn-group' option? Don't worry about that one. Feel free to add any more that you like such as 'disabled'.

@param $name

The text of your button. You may also include badges, labels, icons, etc, but leave the caret up to us. If you are including a dropdown menu and you would like to split the button from the menu, then you can make this an array('split' => $name).

@param $options

These are all of the attributes that you would like to include in the <button> tag, except if you include an 'href' key then it will be an <a> tag. Other potential options include: 'id', 'style', 'title', 'type', 'data-...', etc, but the ones we take notice of and do special things with are:

  • 'dropdown' => This is an array($name => $link, ...) of names and their associated links.
    • If the $name is numeric (ie. not specified) then the $link will be a header (if it is not empty), or a divider if it is.
  • 'dropup' => The same as dropdown, only the caret and menu goes up instead of down.
  • 'active' => This is to specify a $link that will receive the "active" class. You can set this value to either the $name or the $link of your dropdown menu, or an integer (starting from 1). If you just want it to select the current page then you can specify 'url' which will match the current url and path, or 'urlquery' which will match the current url, path, and query string.
  • 'disabled' => This is to specify a link that will receive the "disabled" class. You can set this value to either the $name or the $link of your dropdown menu.
  • 'pull' => Either 'left' (default) or 'right'. Where you would like the dropdown to be positioned, relative to the parent.
@example
echo $bp->button('primary', 'Primary');

echo $bp->button('lg success', 'Link', array('href'=>'#'));

echo $bp->button('default', 'Dropdown', array(
    'dropdown' => array(
        'Header',
        'Action' => '#',
        'Another action' => '#',
        'Active link' => '#',
        '',
        'Separated link' => '#',
        'Disabled link' => '#',
    ),
    'active' => 'Active link',
    'disabled' => 'Disabled link',
));

public string group ( string $class , array $buttons [, string $form ] )

Group your buttons together.

@param $class

The classes: 'xs', 'sm', 'lg', 'justified', and 'vertical' will all be prefixed with 'btn-group-...', and we include the 'btn-group' class too. When you size a group up, then don't size the individual buttons.

@param $buttons

An array($bp->button(), ...) of buttons.

@param $form

This can be either 'checkbox' or 'radio' and your button group will act accordingly.

@example
echo $bp->group('', array(
    $bp->button('default', 'Left'),
    $bp->button('default', 'Middle'),
    $bp->button('default', array('split'=>'Right'), array(
        'dropdown' => array(
            'Works' => '#',
            'Here' => '#',
            'Too' => '#',
        ),
        'pull' => 'right',
    )),
));

public string links ( string $tag , array $links [, array $options ] )

This used to be a private method that we only used internally for tabs and pills and buttons and so forth, but it is just so useful. Now you can make your own dropdowns with regular <a> links as well.

@param $tag

If this isn't 'li', then it will be an 'a'. If you specify 'li' tags then you will need to surround this method's output with your own <ul> or <ol> tags. Otherwise you can just use the returned <a> $links (with dropdowns if any) as is. The <a>'s with dropdowns will be surrounded by a <span class="dropdown">. If one of those dropdown links are active then the <span> and <a> tags will receive an additional 'active' class as well. To add any other class(es) to the <a> or <li> tags just add them after the $tag here eg. 'a special-class'.

@param $links

An array($name => $href, ...) of links. If $href is an array unto itself, then it will be turned into a dropdown menu with the same header and divider rules applied as with $bp->buttons().

@param $options

The available options are:

  • 'active' => $name, $href, 'url', 'urlquery', or an integer (starting from 1).
  • 'disabled' => $name, $href or an integer (starting from 1).
  • 'align' => 'left' (default) or 'right' - the direction you would like to pull them towards.
@example
echo $bp->links('a special-class', array(
    'Home' => BASE_URL,
    'Dropdown' => array(
        'Header',
        'Action' => '#',
        'Another Action' => '#',
    ),
), array(
    'active' => 'url',
));

public string tabs ( array $links [, array $options ] )

Creates a Bootstrap tabs nav menu.

@param $links

An array($name => $href, ...) of links. If $href is an array unto itself, then it will be turned into a dropdown menu with the same header and divider rules applied as with $bp->buttons().

@param $options

The available options are:

  • 'active' => $name, $href, 'url', 'urlquery', or an integer (starting from 1).
  • 'disabled' => $name, $href, or an integer (starting from 1).
  • 'align' =>
    • 'justified' - So the tabs will horizontally extend the full width.
    • 'left' (default) or 'right' - The direction you would like to pull them towards.
@example
echo $bp->tabs(array(
    'Nav' => '#',
    'Tabs' => '#',
    'Justified' => '#',
), array(
    'align' => 'justified',
    'active' => 1,
));

public string pills ( array $links [, array $options ] )

Creates a Bootstrap pills nav menu.

@param $links

An array($name => $href, ...) of links. If $href is an array unto itself, then it will be turned into a dropdown menu with the same header and divider rules applied as with $bp->buttons().

@param $options

The available options are:

  • 'active' => $name, $href, 'url', 'urlquery', or an integer (starting from 1).
  • 'disabled' => $name, $href or an integer (starting from 1).
  • 'align' =>
    • 'justified' - The pills will horizontally extend the full width.
    • 'vertical' or 'stacked' - Each pill will be stacked on top of the other.
    • 'left' (default) or 'right' - The direction you would like to pull them towards.
@example
echo $bp->pills(array(
    'Home ' . $bp->badge(42) => '#',
    'Profile' . $bp->badge(0) => '#',
    'Messages' . $bp->badge(3) => array(
        'New! ' . $bp->badge(1) => '#',
        'Read ' => '#',
        'Trashed ' => '#',
        '',
        'Spam ' . $bp->badge(2) => '#',
    ),
), array(
    'active' => 'Home',
));

public string breadcrumbs ( array $links )

Creates a Bootstrap styled breadcrumb trail. The last link is automatically activated.

@param $links

An array($name => $href) of links to display. The $href may also be another array($name => $href) of dropdown links.

@example
$bp->breadcrumbs(array(
    'Home' => '#',
    'Library' => '#',
    'Data' => '#',
));

public string label ( string $class , string $text )

Creates a Bootstrap label, and saves you from having to type the label twice. Awesome, right?

@param $class

Either 'default', 'primary', 'success', 'info', 'warning', or 'danger'. The 'label' class and prefix are automatically included. You can add more classes to it if you like.

@param $text

The label's text.

@example
echo $bp->label('default', 'New');

public string badge ( int $count [, string $align ] )

Creates a Bootstrap badge, and is a bit more useful than $bp->label(). If $count equals 0, or if it's not numeric (null?), then it still includes the tag, but leaves the value empty.

@param $count

The number you would like to display.

@param $align

This will pull your badge 'right' or 'left' or not (default). In a list group, badges are automatically positioned to the right.

@example
echo $bp->badge(13, 'right');

public string alert ( string $type , string $alert [, bool $dismissable = true ] )

Creates Bootstrap alert messages.

@param $type

Either 'success', 'info', 'warning', or 'danger'.

@param $alert

The status message. All <h1-6> headers and <a> links will be classed appropriately.

@param $dismissable

If you set this to false, then the alert will not be dismissable.

@example
echo $bp->alert('info', '<h3>Heads up!</h3> This alert needs your attention, but it\'s not <a href="#">super important</a>.');

echo $bp->alert('danger', '<h3>Oh snap!</h3> Change a few things up and <a href="#">try submitting again</a>.', false);

public string progress ( int $percent [, string $class [, mixed $display = false ]] )

Creates every flavor of progress bar that Bootstrap has to offer.

@param $percent

The amount of progress from 0 to 100. In order to stack multiple values then turn this into an array.

@param $class

You can include one of the four contextual classes: 'success', 'info', 'warning' or 'danger'. Also 'striped' and 'active' if you like the looks of those. These will all be properly prefixed with 'progress-...'. If you are stacking multiple bars, then turn this into an array and make sure your classes correspond with your percentages.

@param $display

If anything but false, then the percentage will be displayed in the progress bar.

@example
echo $bp->progress(60, 'info', 'display');

echo $bp->progress(array(25, 25, 25, 25), array('', 'warning', 'success', 'danger striped'));

public string media ( array $list )

This is the easiest way I could devise of making Bootstrap media objects as manageable as possible. <h1-6> headers and <img>es will automatically be classed appropriately.

@param $list

A media array row that looks like this: array($left, $body, $right).

  • If you don't have an image or whatever for the left side, then set an empty value.
  • If you have nothing to right align then you can either leave it off, or set an empty value.
  • If you have a special class and / or id to assign, then you can include them in the array like so:
    • array('id' => $id, 'class' => 'custom', $left, $body, $right);
  • You can pack unlimited $list's (arguments) into this method, each $list being a sibling of the other:
    • $bp->media(array($left, $body, $right), array($left, $body, $right), array($left, $body, $right));
  • To nest media lists in a parent / child relationship, just add another media array row to the parent:
    • array($left, $body, $right, array($left, $body, $right, array($left, $body, $right))); - This would be a parent, child, grandchild arrangement.
    • array($left, $body, $right, array($left, $body, $right), array($left, $body, $right)); - A parent, child, child condition.
    • array($left, $body, $right, array($left, $body, $right, array($left, $body, $right), array($left, $body, $right)), array($left, $body, $right)), array($left, $body, $right)); - Now I'm just messing with you, but I think you've got the picture (a parent, child, grandchild, grandchild, child, sibling).
    • This could go on ad infinitum, but soon your content will become pretty scrunched up if you take it too far.
@example
echo $bp->media(array(
    'Image',
    '<h1>Parent</h1> <p>Paragraph</p>',
    '<img src="parent.jpg" alt="Family Photo">',
    array(
        'Image',
        '<h2>1st Child</h2>',
        array(
            'Image',
            '<h3>1st Grandchild</h3>',
        ),
    ),
    array(
        'Image',
        '<h2>2nd Child</h2>',
    ),
), array(
    'class' => 'special',
    'Image',
    '<h1>Sibling</h1> <a href="#">Link</a>',
    '<img src="sibling.jpg" alt="Family Photo">',
));

public string listGroup ( array $links [, mixed $active = false ] )

Creates a Bootstrap list group. <h1-6> Headers and <p> paragraphs will automatically be classed appropriately.

@param $links

If you would like to create an unordered list, then this is just an array of values. Otherwise this will be an array($name => $href, ...) of links. $name badges will automatically be positioned on the right.

@param $active

This value can be either the $name, $href (link), or an integer (starting from 1) that you would like to be selected as "active".

@example
$bp->listGroup(array(
    'Basic',
    'List',
    $bp->badge(1) . ' Group',
));

$bp->listGroup(array(
    'Linked' => '#',
    'List' => '#',
    'Group ' . $bp->badge(2) => '#',
), 'Linked');

$bp->listGroup(array(
    '<h4>Custom</h4> <p>List</p>' => '#',
    $bp->badge(3) . ' <h4>Group</h4> <p>Linked</p>' => '#',
), 1);

public string panel ( string $class , array $sections )

Creates a Bootstrap panel component.

@param $class

Either 'default', 'primary', 'success', 'info', 'warning', or 'danger'. The 'panel' class and prefix are automatically included. You can add more classes to it if you like.

@param $sections

An array($panel => $content, ...) of sections. If $panel equals:

  • 'head', 'header', or 'heading' => The panel heading $content. All <h1-6> headers will be classed appropriately.
  • 'body' => The panel body $content.
  • 'foot', 'footer', or 'footing' => The panel footer $content.
  • Anything else will just be inserted as is. It could be a table, or list group, or ...
@example
echo $bp->panel('primary', array(
    'header' => '<h3>Title</h3>',
    'body' => 'Content',
    'footer' => '<a href="#">Link</a>',
));

echo $bp->panel('default', array(
    'header': 'List group',
    $bp->listGroup(array(
        'One',
        'Two',
        'Three',
    )),
));
Document Your Code

Javascript

public string toggle ( string $type , array $links [, array $options ] )

Creates toggleable tabs and pills for transitioning through panes of local content.

@param $type

Specify either 'tabs' or 'pills'.

@param $links

An array($name => $html, ...) of content to toggle through. If $html is an array unto itself, then it will be turned into a dropdown menu with the same header and divider rules applied as with $bp->buttons().

@param $options

The available options are:

  • 'fade' - No key, just the value. This will give your panes a fade in effect while toggling.
  • 'active' => $name, $html (if you dare), or an integer (starting from 1).
  • 'disabled' => $name, $html (if you dare), or an integer (starting from 1).
  • 'align' => 'justified', 'left', or 'right'.
@example
echo $bp->toggle('tabs', array(
    'Home' => 'One',
    'Profile' => 'Two',
    'Dropdown' => array(
        'This' => 'Three',
        'That' => 'Four',
    ),
), array(
    'active' => 'This',
    'fade',
));

public string accordion ( string $class , array $sections [, int $open = 1 ] )

Bootstrap accordions are basically collapsible panels. That is essentially what you are creating here.

@param $class

Either 'default', 'primary', 'success', 'info', 'warning', or 'danger'. These only apply to the head section, and are passed directly by us into $bp->panel().

@param $sections

An array($heading => $body, ...) of sections that will become your accordion. The <h1-6> headers in the $heading will be automatically classed appropriately. Accordions are definitely nestable, but we don't create them via nested arrays through this method. Just add a pre-made accordion to the $body you would like it to reside in ie. the $body should never be an array.

@param $open

This is the panel number you would like be open from the get-go (starting at 1). If you don't want any panel to be opened initially, then set this to 0.

@example
echo $bp->accordion('info', array(
    '<h4>Group Item #1</h4>' => 'One',
    '<h4>Group Item #2</h4>' => 'Two',
    '<h4>Group Item #3</h4>' => 'Three',
), 2);

public string carousel ( array $images [, array $options ] )

Creates a Bootstrap carousel for cycling through elements. Those elements don't necessarily need to be images, but pretty much they always are.

@param $images

An array($image, ...) of images to cycle through, starting with the first (logically). To get fancy and add captions, then make this an array($image => $caption, ...) of images with captions to cycle through. If you have some images with captions and others without, then you can merge these two concepts no problem. Remember, the $image is not just a location, it is the entire <img> tag src and all.

@param $options

The available options are:

  • 'interval' => The time delay in thousandths of a second between cycles (or frame changes). The default is 5000 ie. 5 seconds.
  • 'indicators' => The little circle things at the bottom that show where you are at. If you don't want them, then set this to false. The default is true ie. include them.
  • 'controls' => The clickable arrows on the side for scrolling back and forth. If you don't want them, then set this to false. The default is true ie. include them. Also by default we use array($bp->icon('chevron-left'), $bp->icon('chevron-right')) for the left and right arrows. If you would like something else, then you can make this an array of your preferences.
@example
echo '<div style="width:500px; height:300px; margin:20px auto;">';
echo $bp->carousel(array(
    '<img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">',
    '<img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">' => '<p>Caption</p>',
    '<img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">' => '<h3>Header</h3>',
), array(
    'interval' => 3000,
));
echo '</div>';
Document Your Code

Installation

Add the following to your composer.json file.

{
    "require": {
        "bootpress/bootstrap": "^1.0"
    }
}

Example Usage

<?php

use BootPress\Bootstrap\v3\Component as Bootstrap;

// To use in your BootPress Blog's Twig templates:
$blog = new \BootPress\Blog\Component();
$blog->theme->vars['bp'] = new Bootstrap();

The Twig Template examples will output the Bootstrap HTML.

Grid system

Twig Template

{{ bp.row('sm', [
    bp.col(3, 'left'),
    bp.col(6, 'center'),
    bp.col(3, 'right'),
]) }}

{{  bp.row('sm', 'md', 'lg', [
    bp.col(12, '9 push-3', '10 push-2', 'content'),
    bp.col('6 offset-3 clearfix', '3 pull-9', '2 pull-10', 'sidebar'),
]) }}

Bootstrap HTML

<div class="row">
    <div class="col-sm-3">left</div>
    <div class="col-sm-6">center</div>
    <div class="col-sm-3">right</div>
</div>

<div class="row">
    <div class="col-sm-12 col-md-9 col-md-push-3 col-lg-10 col-lg-push-2">content</div>
    <div class="col-sm-6 col-sm-offset-3 clearfix col-md-3 col-md-pull-9 col-lg-2 col-lg-pull-10">sidebar</div>
</div>

Lists

Twig Template

{{ bp.lister('ol', [
    'Coffee',
    'Tea': [
        'Black tea',
        'Green tea',
    ],
    'Milk',
]) }}

{{ bp.lister('ul list-inline', [
    'Coffee',
    'Tea',
    'Milk',
]) }}

{{ bp.lister('dl dl-horizontal', [
    'Coffee': [
        'Black hot drink',
        'Caffeinated beverage',
    ],
    'Milk': 'White cold drink',
]) }}

Bootstrap HTML

<ol>
    <li>Coffee</li>
    <li>Tea
        <ol>
            <li>Black tea</li>
            <li>Green tea</li>
        </ol>
    </li>
    <li>Milk</li>
</ol>

<ul class="list-inline">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<dl class="dl-horizontal">
    <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dd>Caffeinated beverage</dd>
    <dt>Milk</dt>
        <dd>White cold drink</dd>
</dl>

Tables

Twig Template

{{ bp.table.open('class=responsive striped') }}
    {{ bp.table.head() }}
    {{ bp.table.cell('', 'One') }}
    {{ bp.table.row() }}
    {{ bp.table.cell('', 'Two') }}
    {{ bp.table.foot() }}
    {{ bp.table.cell('', 'Three') }}
{{ bp.table.close() }}

Bootstrap HTML

<table class="table table-responsive table-striped">
    <thead>
        <tr>
            <th>One</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Two</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Three</td>
        </tr>
    </tfoot>
</table>

Forms

Twig Template

{% set form = bp.form('sign_in') %}

{{ form.menu('remember', ['Y':'Remember me']) }}

{{ form.validator.set([
    'email': 'required|email',
    'password': 'required|minLength[5]|noWhiteSpace',
    'remember': 'yesNo',
]) }}

{% set vars = form.validator.certified() %}
{% if vars %}
    {{ form.message('info', 'Good job, you are doing great!') }}
    {{ form.eject() }}
{% endif %}

{{ form.size('lg') }}
{{ form.align('collapse') }}

{{ form.header() }}
{{ form.fieldset('Sign In', [
    form.field('Email address', form.group(bp.icon('user'), '', form.text('email'))),
    form.field('Password', form.group(bp.icon('lock'), '', form.password('password'))),
    form.field('', form.checkbox('remember')),
    form.submit(),
]) }}
{{ form.close() }}

Bootstrap HTML

<form name="sign_in" method="post" action="http://example.com?submitted=sign_in" accept-charset="utf-8" autocomplete="off">
    <fieldset><legend>Sign In</legend>
        <div class="form-group">
            <label class="input-lg" for="emailI">Email address</label>
            <p class="validation help-block" style="display:none;"></p>
            <div class="input-group input-group-lg">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-user"></span>
                </div>
                <input type="text" name="email" id="emailI" data-rule-required="true" data-rule-email="true" class="form-control input-lg">
            </div>
        </div>
        <div class="form-group">
            <label class="input-lg" for="passwordII">Password</label>
            <p class="validation help-block" style="display:none;"></p>
            <div class="input-group input-group-lg">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-lock"></span>
                </div>
                <input type="password" name="password" id="passwordII" data-rule-required="true" data-rule-minlength="5" data-rule-nowhitespace="true" class="form-control input-lg">
            </div>
        </div>
        <div class="form-group">
            <p class="validation help-block" style="display:none;"></p>
            <div class="checkbox input-lg">
                <label><input type="checkbox" name="remember" value="Y"> Remember me</label>
            </div>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary btn-lg" data-loading-text="Submitting...">Submit</button>
        </div>
    </fieldset>
</form>

Buttons

Twig Template

{{ bp.button('primary', 'Primary') }}

{{ bp.button('lg success', 'Link', ['href':'#']) }}

{{ bp.button('link', 'Button') }}

Bootstrap HTML

<button type="button" class="btn btn-primary">Primary</button>

<a href="#" class="btn btn-lg btn-success">Link</a>

<button type="button" class="btn btn-link">Button</button>

Button dropdowns

Twig Template

{{ bp.button('default', 'Dropdown', [
    'dropdown': [
        'Header',
        'Action': '#',
        'Another action': '#',
        'Active link': '#',
        '',
        'Separated link': '#',
        'Disabled link': '#',
    ],
    'active': 'Active link',
    'disabled': 'Disabled link',
]) }}

Bootstrap HTML

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" id="dropdownI" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></button>
    <ul class="dropdown-menu" aria-labelledby="dropdownI">
        <li role="presentation" class="dropdown-header">Header</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
        <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">Active link</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
    </ul>
</div>

Button groups

Twig Template

{{ bp.group('', [
    bp.button('default', 'Left'),
    bp.button('default', 'Middle'),
    bp.button('default', ['split':'Right'], [
        'dropdown': [
            'Works': '#',
            'Here': '#',
            'Too': '#',
        ],
        'pull': 'right',
    ]),
]) }}

Bootstrap HTML

<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Right</button>
        <button type="button" class="btn btn-default dropdown-toggle" id="dropdownI" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span></button>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownI">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Works</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Too</a></li>
        </ul>
    </div>
</div>

Tabs

Twig Template

{{ bp.tabs([
    'Nav': '#',
    'Tabs': '#',
    'Justified': '#',
], [
    'align': 'justified',
    'active': 1,
]) }}

Bootstrap HTML

<ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active"><a href="#">Nav</a></li>
    <li role="presentation"><a href="#">Tabs</a></li>
    <li role="presentation"><a href="#">Justified</a></li>
</ul>

Pills

Twig Template

{{ bp.pills([
    'Home ' ~ bp.badge(42): '#',
    'Profile ' ~ bp.badge(0): '#',
    'Messages ' ~ bp.badge(3): [
        'New! ' ~ bp.badge(1): '#',
        'Read ': '#',
        'Trashed ': '#',
        '',
        'Spam ' ~ bp.badge(2): '#',
    ],
], [
    'active': 'Home',
]) }}

Bootstrap HTML

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile <span class="badge"></span></a></li>
    <li class="dropdown"><a id="dropdownI" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Messages <span class="badge">3</span> <span class="caret"></span></a> 
        <ul class="dropdown-menu" aria-labelledby="dropdownI">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">New! <span class="badge">1</span></a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Read </a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Trashed </a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spam <span class="badge">2</span></a></li>
        </ul>
    </li>
</ul>

Navbar

Twig Template

{{ bp.navbar.open(['Website':'http://example.com']) }}

    {{ bp.navbar.menu([
        'Home': '#',
        'Work': '#',
        'Dropdown': [
            'Action': '#',
            'More': '#',
        ],
    ], [
        'active': 'Home',
    ]) }}

    {{ bp.navbar.button('primary', 'Sign In', [
        'pull': 'right',
    ]) }}

    {{ bp.navbar.search('http://example.com', [
        'button': false,
    ]) }}

{{ bp.navbar.close() }}

Bootstrap HTML

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarI">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="http://example.com">Website</a>

        </div>
        <div class="collapse navbar-collapse" id="navbarI">

            <ul class="nav navbar-nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Work</a></li>
                <li class="dropdown">
                    <a id="dropdownII" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownII">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">More</a></li>
                    </ul>
                </li>
            </ul>

            <button type="button" class="btn btn-primary navbar-btn navbar-right">Sign In</button>

            <form name="search" method="get" action="http://example.com" accept-charset="utf-8" autocomplete="off" role="search" class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search" name="search" id="searchIII" data-rule-required="true">
            </form>

        </div>
    </div>
</nav>

Breadcrumbs

Twig Template

{{ bp.breadcrumbs([
    'Home': '#',
    'Library': '#',
    'Data': '#',
]) }}

Bootstrap HTML

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
</ul>

Pagination

Twig Template

{% set records = range(1, 100) %}

{% if not bp.pagination.set('page', '10', 'http://example.com') %}
    {{ bp.pagination.total(records|length) }}
{% endif %}

{{ bp.pagination.links() }}

{{ bp.pagination.pager() }}

Bootstrap HTML

<ul class="pagination">
    <li class="active"><span>1</span></li>
    <li><a href="http://example.com?page=2of10">2</a></li>
    <li><a href="http://example.com?page=3of10">3</a></li>
    <li><a href="http://example.com?page=4of10">4</a></li>
    <li><a href="http://example.com?page=5of10">5</a></li>
    <li><a href="http://example.com?page=6of10">6</a></li>
    <li><a href="http://example.com?page=7of10">7</a></li>
    <li class="disabled"><span>&hellip;</span></li>
    <li><a href="http://example.com?page=10of10">10</a></li>
    <li><a href="http://example.com?page=2of10">&raquo;</a></li>
</ul>

<ul class="pager">
    <li class="next"><a href="http://example.com?page=2of10">Next &raquo;</a></li>
</ul>

Labels

Twig Template

{{ bp.label('default', 'New') }}

Bootstrap HTML

<span class="label label-default">New</span>

Badges

Twig Template

{{ bp.badge(13, 'right') }}

Bootstrap HTML

<span class="badge pull-right">13</span>

Alerts

Twig Template

{{ bp.alert('info', '<h3>Heads up!</h3> This alert needs your attention, but it\'s not <a href="#">super important</a>.') }}

{{ bp.alert('danger', '<h3>Oh snap!</h3> Change a few things up and <a href="#">try submitting again</a>.', false) }}

Bootstrap HTML

<div class="alert alert-info alert-dismissable" role="alert">
    <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
    <h3 class="alert-heading">Heads up!</h3> This alert needs your attention, but it's not <a href="#" class="alert-link">super important</a>.
</div>

<div class="alert alert-danger" role="alert">
    <h3 class="alert-heading">Oh snap!</h3> Change a few things up and <a href="#" class="alert-link">try submitting again</a>.
</div>

Progress bars

Twig Template

{{ bp.progress(60, 'info', 'display') }}

{{ bp.progress([25, 25, 25, 25], ['', 'warning', 'success', 'danger striped']) }}

Bootstrap HTML

<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>

<div class="progress">
    <div class="progress-bar" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-warning" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-success" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:25%;" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only">25% Complete</span>
    </div>
</div>

Media object

Twig Template

{{ bp.media([
    'Image',
    '<h1>Parent</h1> <p>Paragraph</p>',
    '<img src="parent.jpg" alt="Family Photo">',
    [
        'Image',
        '<h2>1st Child</h2>',
        [
            'Image',
            '<h3>1st Grandchild</h3>',
        ],
    ],
    [
        'Image',
        '<h2>2nd Child</h2>',
    ],
], [
    'class': 'spoiled',
    'Image',
    '<h1>Sibling</h1> <a href="#">Link</a>',
    '<img src="sibling.jpg" alt="Family Photo">',
]) }}

Bootstrap HTML

<div class="media">
    <div class="media-left">Image</div>
    <div class="media-body">
        <h1 class="media-heading">Parent</h1>
        <p>Paragraph</p>
        <div class="media">
            <div class="media-left">Image</div>
            <div class="media-body">
                <h2 class="media-heading">1st Child</h2>
                <div class="media">
                    <div class="media-left">Image</div>
                    <div class="media-body">
                        <h3 class="media-heading">1st Grandchild</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="media">
            <div class="media-left">Image</div>
            <div class="media-body">
                <h2 class="media-heading">2nd Child</h2>
            </div>
        </div>
    </div>
    <div class="media-right">
        <img src="parent.jpg" alt="Family Photo" class="media-object">
    </div>
</div>
<div class="media spoiled">
    <div class="media-left">Image</div>
    <div class="media-body">
        <h1 class="media-heading">Sibling</h1>
        <a href="#">Link</a>
    </div>
    <div class="media-right">
        <img src="sibling.jpg" alt="Family Photo" class="media-object">
    </div>
</div>

List group

Twig Template

{{ bp.listGroup([
    'Basic',
    'List',
    bp.badge(1) ~ ' Group',
]) }}

{{ bp.listGroup([
    'Linked': '#',
    'List': '#',
    'Group ' ~ bp.badge(2): '#',
]) }}

{{ bp.listGroup([
    '<h4>Custom</h4> <p>List</p>': '#',
    bp.badge(3) ~ ' <h4>Group</h4> <p>Linked</p>': '#',
], 1) }}

Bootstrap HTML

<ul class="list-group">
    <li class="list-group-item">Basic</li>
    <li class="list-group-item">List</li>
    <li class="list-group-item"><span class="badge">1</span> Group</li>
</ul>

<div class="list-group">
    <a class="list-group-item" href="#">Linked</a>
    <a class="list-group-item" href="#">List</a>
    <a class="list-group-item" href="#">Group <span class="badge">2</span></a>
</div>

<div class="list-group">
    <a class="list-group-item active" href="#">
        <h4 class="list-group-item-heading">Custom</h4>
        <p class="list-group-item-text">List</p>
    </a>
    <a class="list-group-item" href="#">
        <span class="badge">3</span>
        <h4 class="list-group-item-heading">Group</h4>
        <p class="list-group-item-text">Linked</p>
    </a>
</div>

Panels

Twig Template

{{ bp.panel('primary', [
    'header': '<h3>Title</h3>',
    'body': 'Content',
    'footer': '<a href="#">Link</a>',
]) }}

{{ bp.panel('default', [
    'header': 'List group',
    bp.listGroup([
        'One',
        'Two',
        'Three',
    ]),
]) }}

Bootstrap HTML

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Title</h3>
    </div>
    <div class="panel-body">Content</div>
    <div class="panel-footer">
        <a href="#">Link</a>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">List group</div>
    <ul class="list-group">
        <li class="list-group-item">One</li>
        <li class="list-group-item">Two</li>
        <li class="list-group-item">Three</li>
    </ul>
</div>

Togglable tabs

Twig Template

{{ bp.toggle('tabs', [
    'Home': 'One',
    'Profile': 'Two',
    'Dropdown': [
        'This': 'Three',
        'That': 'Four',
    ],
], [
    'active': 'This',
    'fade',
]) }}

Bootstrap HTML

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#tabsI" aria-controls="tabsI" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#tabsII" aria-controls="tabsII" role="tab" data-toggle="tab">Profile</a></li>
    <li class="dropdown active">
        <a id="dropdownV" data-target="#" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" aria-labelledby="dropdownV">
            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#tabsIII" data-toggle="tab">This</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#tabsIV" data-toggle="tab">That</a></li>
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="tabsI">One</div>
    <div role="tabpanel" class="tab-pane fade" id="tabsII">Two</div>
    <div role="tabpanel" class="tab-pane fade in active" id="tabsIII">Three</div>
    <div role="tabpanel" class="tab-pane fade" id="tabsIV">Four</div>
</div>

Accordion

Twig Template

{{ bp.accordion('info', [
    '<h4>Group Item #1</h4>': 'One',
    '<h4>Group Item #2</h4>': 'Two',
    '<h4>Group Item #3</h4>': 'Three',
], 2) }}

Bootstrap HTML

<div class="panel-group" id="accordionI" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingII">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseIII" aria-expanded="false" aria-controls="collapseIII">Group Item #1</a>
            </h4>
        </div>
        <div id="collapseIII" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingII">
            <div class="panel-body">One</div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingIV">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseV" aria-expanded="true" aria-controls="collapseV">Group Item #2</a>
            </h4>
        </div>
        <div id="collapseV" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingIV">
            <div class="panel-body">Two</div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingVI">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordionI" href="#collapseVII" aria-expanded="false" aria-controls="collapseVII">Group Item #3</a>
            </h4>
        </div>
        <div id="collapseVII" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingVI">
            <div class="panel-body">Three</div>
        </div>
    </div>
</div>

Carousel

Twig Template

<div style="width:500px; height:300px; margin:20px auto;">
{{ bp.carousel([
    '<img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">',
    '<img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">': '<p>Caption</p>',
    '<img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">': '<h3>Header</h3>',
], [
    'interval': 3000,
]) }}
</div>

Bootstrap HTML

<div style="width:500px; height:300px; margin:20px auto;">
    <div id="carouselI" class="carousel slide" data-ride="carousel" data-interval="3000">
        <ol class="carousel-indicators">
            <li data-target="#carouselI" data-slide-to="0" class="active"></li>
            <li data-target="#carouselI" data-slide-to="1"></li>
            <li data-target="#carouselI" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://lorempixel.com/500/300/food/1/" width="500" height="300">
            </div>
            <div class="item">
                <img src="http://lorempixel.com/500/300/food/2/" width="500" height="300">
                <div class="carousel-caption">
                    <p>Caption</p>
                </div>
            </div>
            <div class="item">
                <img src="http://lorempixel.com/500/300/food/3/" width="500" height="300">
                <div class="carousel-caption">
                    <h3>Header</h3>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carouselI" role="button" data-slide="prev">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carouselI" role="button" data-slide="next">
            <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span>
        </a>
    </div>
</div>