Basic Table

idFirst NameLast Name
1PatrickTalmadge
2PatrickRose
3MaximeFabre
4TaylorOtwell
5JaneDoe
6JohnSmith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])

Striped

Use the chained method striped().

idFirst NameLast Name
1PatrickTalmadge
2PatrickRose
3MaximeFabre
4TaylorOtwell
5JaneDoe
6JohnSmith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])->striped()

Bordered

Use the chained method bordered().

idFirst NameLast Name
1PatrickTalmadge
2PatrickRose
3MaximeFabre
4TaylorOtwell
5JaneDoe
6JohnSmith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])->bordered()

Hover

Use the chained method hover().

idFirst NameLast Name
1PatrickTalmadge
2PatrickRose
3MaximeFabre
4TaylorOtwell
5JaneDoe
6JohnSmith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])->hover()

Condensed

Use the chained method condensed().

idFirst NameLast Name
1PatrickTalmadge
2PatrickRose
3MaximeFabre
4TaylorOtwell
5JaneDoe
6JohnSmith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])->condensed()

Chainable Methods

You can prevent a column from being generated by passing the object attribute name as a string to ignore() Example:

Table::body($body)->ignore('id', 'password')

You can also only return the contents of certain column with the only() method.

Table::body($body)
     ->only(["foo", "bar"])
Heads Up! The only() method takes priority over everything. We'll return the table in the order given by only, and also ignore the ignore() values.

You can dynamically set columns to either append columns to the table or replace current ones, using the callback() method.

idFirst NameLast NameAction
This is #1PatrickTalmadgeEdit Patrick Talmadge
This is #2PatrickRoseEdit Patrick Rose
This is #3MaximeFabreEdit Maxime Fabre
This is #4TaylorOtwellEdit Taylor Otwell
This is #5JaneDoeEdit Jane Doe
This is #6JohnSmithEdit John Smith
Table::withContents([
        [
            'id' => 1,
            'First Name' => 'Patrick',
            'Last Name' => 'Talmadge'
        ],
        [
            'id' => 2,
            'First Name' => 'Patrick',
            'Last Name' => 'Rose'
        ],
        [
            'id' => 3,
            'First Name' => 'Maxime',
            'Last Name' => 'Fabre'
        ],
        [
            'id' => 4,
            'First Name' => 'Taylor',
            'Last Name' => 'Otwell'
        ],
        [
            'id' => 5,
            'First Name' => 'Jane',
            'Last Name' => 'Doe'
        ],
        [
            'id' => 6,
            'First Name' => 'John',
            'Last Name' => 'Smith'
        ],
    ])->callback('id', function ($field, $row) { return 'This is #' . $field; })
      ->callback('Action', function ($field, $row) { return "<a href=\"#\">Edit {$row['First Name']} {$row['Last Name']}</a>"; })
Your callback should accept two arguments. The first is the actual value during render. The second is the entire row.

Table Footers

You can add a footer with the withFooter() method. This should be the exact footer that you wish to use.

ItemCost
Total8.15
Bread1.20
Cheese2.30
Tomatoes2.15
Lettuce2.50
Table::withContents(
[
    [
        'Item' => 'Bread',
        'Cost' => '1.20',
    ],
    [
        'Item' => 'Cheese',
        'Cost' => '2.30',
    ],
    [
        'Item' => 'Tomatoes',
        'Cost' => '2.15',
    ],
    [
        'Item' => 'Lettuce',
        'Cost' => '2.50',
    ],
]
)->withFooter('<tr><td>Total</td><td>8.15</td></td>')

Four types of forms

Bootstrapper extends the Laravel Form class to provide the correct styles for Bootstrap. You can open a form the normal Laravel Form way and just pass in the correct constant.

Name Class Description
Inline Form::inline() Left-aligned label and inline-block controls for compact style
Horizontal Form::horizontal() Float left, right-aligned labels on same line as controls

The form methods take the same arguments as a standard Laravel forms, so you can make them secure by passing in 'secure' => true to your array arguments.

You can also use inlineModel() or horizontalModel(), which will add the relevant classes to a Form::model() call.

Inputs

We extend the standard Laravel form inputs to add the .form-control class, as well as the label() method to add the .control-label class. The method signatures are the same as the standard Laravel ones.

Validation messages

Validation messages can be added using the success(), warning(), error() methods

Form::success(Form::label('success', 'You did well!'), Form::text('success'))
Form::warning(Form::label('warning', 'You did something wrong maybe?'), Form::text('warning'))
Form::error(Form::label('error', 'You did something wrong fo sho'), Form::text('error'))

Help blocks

Create help blocks with the help() method.

You need some help there boyo?
Form::help('You need some help there boyo?')

Control Groups

The ControlGroup class allows you to create a full .form-group block with a label, form input and help.

Here is a help text
ControlGroup::generate(
    Form::label('control', 'Control Group'),
    Form::text('control'),
    Form::help('Here is a help text')
)

If you want to change the size of the form label, you can do so with the last parameter (we default to 2)

Here is a help text
ControlGroup::generate(
    Form::label('control', 'Control Group'),
    Form::text('control'),
    Form::help('Here is a help text'),
    4
)

You can also pass an array as the second argument if you several items you want to group together (like, for example, checkboxes)



Here is a help text
ControlGroup::generate(
    Form::label('control', 'Control Group'),
            [
                [
                    'label' => ['first', 'First'],
                    'input' => ['type' => 'checkbox', 'first', 'First']
                ],
                [
                    'label' => ['second', 'Second'],
                    'input' => ['type' => 'checkbox', 'second', 'Second']
                ]
            ],
    Form::help('Here is a help text'),
    4
    )->withAttributes(['data-foo' => 'bar'])

Each inner array must have an input key that maps to an array that must have a type key. The value of that key should be the name of the method on the Form object. The rest of the array should be the arguments in the order that the method expects them.

The inner array can optionally have a label key that should map to an array of arguments for a Form::input method call.

And like most Bootstrapper objects, withAttributes() allows you to add custom attributes.

Here is a help text
ControlGroup::generate(
    Form::label('control', 'Control Group'),
    Form::text('control'),
    Form::help('Here is a help text'),
    4
)->withAttributes(['data-foo' => 'bar'])

Input Groups

Input groups allow you to wrap your input inside a .input-group div and size them, or add buttons to them. Just add contents using the withContents() method and you're away!

Form::label('test', 'Example input group')
InputGroup::withContents(Form::text('test'))

Addons

Addons can be added using either the append() or prepend() functions

@

.00

$.00

// Prepend an '@'
InputGroup::withContents(Form::text('username'))->prepend('@')
// Append a '.00'
InputGroup::withContents(Form::text('currency'))->append('.00')
// Prepend a '$' and append a '.00'
InputGroup::withContents(Form::text('currency'))->prepend('$')->append('.00')

You can also add buttons by using the appendButton() method.

InputGroup::withContents(Form::text('username'))
          ->prependButton(Button::normal('Prepend'))

InputGroup::withContents(Form::text('currency'))
          ->appendButton(Button::normal('Append'))

InputGroup::withContents(Form::text('currency'))
          ->prependButton(Button::normal('Prepend'))
          ->appendButton(Button::normal('Append'))

Sizing

Sizing is easy! Just use large() or small to size the input and any appended/prepended blocks

InputGroup::withContents(Form::text('large'))->large()
InputGroup::withContents(Form::text('small'))->small()

All the standard Bootstrap button types are supported. See the table below for the full list.

Button Type Output Function
Normal Button::withValue('normal')
Primary Button::primary('Primary')
Success Button::success('Success')
Info Button::info('Info')
Warning Button::warning('Warning')
Danger Button::danger('Danger')
Link Button::link('Link')

Sizing

Buttons can be sized by using one of the various chained methods:

Button Size Output Function
Large Button::normal('Large')->large()
Standard Button::normal('Standard')
Small Button::normal('Small')->small()
Extra Small Button::normal('Extra Small')->extraSmall()

Disabled State

Buttons can be easily disabled using the chained method disable()

Button::primary('Oh noes! I am disabled')->disable()

With Icons

Adding icons is simple. You can either just pass the icon HTML directly to the withValue() method (or any of the shortcut methods) or use the withIcon(), prependIcon() or appendIcon() methods to add an icon.

Button::withIcon(Icon::ok())

Button::normal('Append Icon')->appendIcon(Icon::ok())

Button::normal('Prepend Icon')->prependIcon(Icon::ok())

Buttons as Links

Want to use a button as a link to somewhere? Use the asLinkTo() chained method to create an <a> tag instead of a <button>.

Button::normal('Normal Link')->asLinkTo('#')

Button::warning('Warning Link')->asLinkTo('#')

Button::danger('Danger Link')->asLinkTo('#')

Block Buttons To take up the full width

Use the block() function to add the .btn-block class and take up the full width of the parent.

Button::primary('Block level button')->block()

Submit Buttons

Use the submit() method to create a submit button.

Button::primary('Submit Me!')->submit()

Use the function public static function [SHAPE]($url, $alt = '')

rounded circle thumbnail

Image::rounded('http://placehold.it/140x140', 'rounded')
Image::circle('http://placehold.it/140x140', 'circle')
Image::thumbnail('http://placehold.it/140x140', 'thumbnail')

Responsive Images

Use the chained method responsive() to make your images scale nicely to the parent element.

Inside a .col-md-3

Inside a .col-md-4

Inside a .col-md-5

Image::rounded('//placehold.it/1600x1600')->responsive()