bootpress/bootstrap

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

Thursday, January 19, 2017
by BootPress
Repository
1 Watchers
0 Stars
557 Installations

PHP
1 Dependents
0 Suggesters
0 Forks
0 Open issues
3 Versions
0 % Grown

use BootPress\Bootstrap\v3\Component as Bootstrap;

![License MIT][badge-license] ![PHP 7 Supported][badge-php] ![Code Climate][badge-code-climate] , _(*1)

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 code more readable, easy to update, and less buggy., _(*2)

Installation

Add the following to your composer.json file., _(*3)

``` bash { "require": { "bootpress/bootstrap": "^1.0" } }, _(*4)


## Example Usage

```php
<?php

use BootPress\Bootstrap\v3\Component as Bootstrap;

$bp = new Bootstrap;

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

One line of code is worth a thousand words, so instead of describing everything, it should be pretty self-explanatory what is going on. The PHP and Twig examples will output the HTML., _(*5)

CSS

Grid system

PHP, _(*6)

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

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

Twig, _(*7)

{{ 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'),
]) }}

HTML, _(*8)




    left
    center
    right







    content
    sidebar

Lists

PHP, _(*9)

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

Twig, _(*10)

{{ 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',
]) }}

HTML, _(*11)




    Coffee
    Tea
        
            Black tea
            Green tea
        
    
    Milk

Coffee
Tea
Milk

Coffee: Black hot drink; Caffeinated beverage
Milk: White cold drink

Tables

PHP, _(*12)

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

Twig, _(*13)

{{ 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() }}

HTML, _(*14)

<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

PHP, _(*15)

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

Twig, _(*16)

{% 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() }}

HTML, _(*17)

<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

PHP, _(*18)

echo $bp->button('primary', 'Primary');

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

echo $bp->button('link', 'Button');

Twig, _(*19)

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

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

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

HTML, _(*20)

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

Components

Button dropdowns

PHP, _(*21)

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

Twig, _(*22)

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

HTML, _(*23)

<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

PHP, _(*24)

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

Twig, _(*25)

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

HTML, _(*26)

<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

PHP, _(*27)

echo $bp->tabs(array(
    'Nav' => '#',
    'Tabs' => '#',
    'Justified' => '#',
), array(
    'align' => 'justified',
    'active' => 1,
));

Twig, _(*28)

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

HTML, _(*29)

<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

PHP, _(*30)

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

Twig, _(*31)

{{ 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',
]) }}

HTML, _(*32)

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

PHP, _(*33)

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

    echo $bp->navbar->menu(array(
        'Home' => '#',
        'Work' => '#',
        'Dropdown' => array(
            'Action' => '#',
            'More' => '#',
        ),
    ), array(
        'active' => 'Home',
    ));

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

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

echo $bp->navbar->close();

Twig, _(*34)

{{ 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() }}

HTML, _(*35)

<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

PHP, _(*36)

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

Twig, _(*37)

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

HTML, _(*38)

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

Pagination

PHP, _(*39)

$records = range(1, 100);

if (!$bp->pagination->set('page', 10, 'http://example.com')) {
    $bp->pagination->total(count($records));
}

echo $pagination->links();

echo $pagination->pager();

Twig, _(*40)

{% 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() }}

HTML, _(*41)

1
2
3
4
5
6
7
…
10
»

Labels

PHP, _(*42)

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

Twig, _(*43)

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

HTML, _(*44)

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

Badges

PHP, _(*45)

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

Twig, _(*46)

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

HTML, _(*47)

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

Alerts

PHP, _(*48)

echo $bp->alert('info', '

Heads up!

 This alert needs your attention, but it\'s not <a href="#">super important</a>.');

echo $bp->alert('danger', '

Oh snap!

 Change a few things up and <a href="#">try submitting again</a>.', false);

Twig, _(*49)

{{ bp.alert('info', '

Heads up!

 This alert needs your attention, but it\'s not <a href="#">super important</a>.') }}

{{ bp.alert('danger', '

Oh snap!

 Change a few things up and <a href="#">try submitting again</a>.', false) }}

HTML, _(*50)




    
    Heads up!
 This alert needs your attention, but it's not super important.







    Oh snap!
 Change a few things up and try submitting again.

Progress bars

PHP, _(*51)

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

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

Twig, _(*52)

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

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

HTML, _(*53)




    60%







    
        25% Complete
    
    
        25% Complete
    
    
        25% Complete
    
    
        25% Complete

Media object

PHP, _(*54)

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' => 'spoiled',
    'Image',
    '<h1>Sibling</h1> <a href="#">Link</a>',
    '<img src="sibling.jpg" alt="Family Photo">',
));

Twig, _(*55)

{{ 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">',
]) }}

HTML, _(*56)

<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

PHP, _(*57)

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

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

$bp->listGroup(array(
    '

Custom



List, _(*58)

' => '#',
    $bp->badge(3) . ' 

Group



Linked, _(*59)

' => '#',
), 1);

Twig, _(*60)

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

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

{{ bp.listGroup([
    '

Custom



List, _(*61)

': '#',
    bp.badge(3) ~ ' 

Group



Linked, _(*62)

': '#',
], 1) }}

HTML, _(*63)

Basic
List
1 Group

Linked List Group 2

Custom

List, _(*64)

3

Group

Linked, _(*65)

Panels

PHP, _(*66)

echo $bp->panel('primary', array(
    'header' => '

Title

',
    'body' => 'Content',
    'footer' => '<a href="#">Link</a>',
));

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

Twig, _(*67)

{{ bp.panel('primary', [
    'header': '

Title

',
    'body': 'Content',
    'footer': '<a href="#">Link</a>',
]) }}

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

HTML, _(*68)




    
        Title
    
    Content
    
        Link
    







    List group
    
        One
        Two
        Three

Javascript

Togglable tabs

PHP, _(*69)

echo $bp->toggle('tabs', array(
    'Home' => 'One',
    'Profile' => 'Two',
    'Dropdown' => array(
        'This' => 'Three',
        'That' => 'Four',
    ),
), array(
    'active' => 'This',
    'fade',
));

Twig, _(*70)

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

HTML, _(*71)

<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

PHP, _(*72)

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

Twig, _(*73)

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

HTML, _(*74)

<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

PHP, _(*75)

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

Twig, _(*76)

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

HTML, _(*77)

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

License

The MIT License (MIT). Please see License File for more information., _(*78)

19/01 2017

dev-master

9999999-dev https://www.bootpress.org/components/bootstrap.html

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

Sources Download

MIT

The Requires

The Development Requires

by Kyle Gadd

framework css bootstrap bootstrap3 bootpress

03/01 2017

v1.1

1.1.0.0

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

Sources Download

MIT

The Requires

The Development Requires

by Kyle Gadd

framework css bootstrap bootstrap3 bootpress

27/10 2016

v1.0

1.0.0.0

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

Sources Download

MIT

The Requires

The Development Requires

by Kyle Gadd

framework css bootstrap bootstrap3 bootpress

library bootstrap

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

bootpress/bootstrap

The README.md

use BootPress\Bootstrap\v3\Component as Bootstrap;

Installation

CSS

Components

Heads up!

Oh snap!

Heads up!

Oh snap!

Heads up!

Oh snap!

Custom

Group

Custom

Group

Custom

Group

Title

Title

Title

Javascript

License

The Versions

dev-master

The Requires

The Development Requires

by Kyle Gadd

v1.1

The Requires

The Development Requires

by Kyle Gadd

v1.0

The Requires

The Development Requires

by Kyle Gadd