Bootstrap Component

@var

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

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'),
));

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'),
));

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',
));

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');

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();

@var

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

@var

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

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');

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',
));

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',
    )),
));

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',
));

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,
));

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',
));

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' => '#',
));

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');

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');

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);

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'));

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">',
));

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);

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',
    )),
));

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',
));

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);

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>';