Button Groups

Use button groups to join multiple buttons together as one composite component. Build them with an array.

ButtonGroup::withContents([
             Button::primary('Left'),
             Button::primary('Middle'),
             Button::primary('Right'),
           ])
Heads Up! We accept any thing that's string-like - either a string or an object with a __toString method

Checkbox and radio flavors

Button groups can also function as radios , where only one button may be active, or checkboxes, where any number of buttons may be active.

ButtonGroup::checkbox([
             Button::primary('Left'),
             Button::primary('Middle'),
             Button::primary('Right'),
           ])
//Radio  
ButtonGroup::radio([
             Button::primary('Left'),
             Button::primary('Middle'),
             Button::primary('Right'),
           ])
Heads Up! We'll convert Button objects into checkboxes or radio buttons. We'll just print out anything else

Dropdowns in button groups

Label::info('Heads up!') Buttons with dropdowns must be individually wrapped in their own ButtonGroup within a .btn-toolbar for proper rendering.

Bootstrapper provides support for creating any of the standard Glyphicons included with Bootstrap. Icons can be created in two ways:

  • Use the create() method.

    Icon::create('ok')
    Icon::create('remove')
    
  • Use the magic method (eg Icon::ok(), Icon::remove())

    Icon::ok()
    Icon::remove()
    

Want to use a different icon set instead? Then run php artisan config:publish patricktalmadge/bootstrapper and edit the values in app/config/packages/patricktalmadge/bootstrapper/config.php to reflect the icon class you'd like to use.

Labels Output Function call
Normal Default Label::normal('Default')
Primary Primary Label::primary('Primary')
Success Success Label::success('Success')
Info Info Label::info('Info')
Warning Warning Label::warning('Warning')
Danger Danger Label::danger('Danger')

Badges can be created using withContents()

1

Badge::withContents(1)

Alerts Styles for success, warning, and error messages

Lightweight defaults

Functions

success()
Alert::success()
Alert::success('Alert::success()')
info()
Alert::info()
Alert::info('Alert::info()')
warning()
Alert::warning()
Alert::warning('Alert::warning()')
danger()
Alert::danger()
Alert::danger('Alert::danger()')

Auto Closing With JavaScript

You can add a autoclosing × by using the chained method close().

Heads up! The closing of the alert is dynamically handled by Bootstrap's javascript. You don't need to add any custom javascript on your site for this functionality.

Holy moly! You need to close this alert right damn now!
Alert::warning('Holy moly! You need to close this alert right damn now!')->close()

We default to using a times symbol (×) for the closing x. Want to use something else? Just pass it into the close method as a parameter.

I prefer to use an "f" to a ×
Alert::warning('I prefer to use an "f" to a ×')->close('f')
Type Example Code
Normal
20% complete
40% complete
60% complete
ProgressBar::normal(20)


ProgressBar::normal(40)


ProgressBar::normal(60)
Success
20% complete
40% complete
60% complete
ProgressBar::success(20)


ProgressBar::success(40)


ProgressBar::success(60)
Info
20% complete
40% complete
60% complete
ProgressBar::info(20)


ProgressBar::info(40)


ProgressBar::info(60)
Warning
20% complete
40% complete
60% complete
ProgressBar::warning(20)


ProgressBar::warning(40)


ProgressBar::warning(60)
Danger
20% complete
40% complete
60% complete
ProgressBar::danger(20)


ProgressBar::danger(40)


ProgressBar::danger(60)

Striping and Animating

Want a striped Progress Bar? Just use the striped() method. You can also animate the stripes with the animated() method.

40% complete
40% complete

ProgressBar::normal(40)->striped()
ProgressBar::normal(40)->animated()

Visible Percentages

Want to display the actual percentage? Use the visible() method.

40%
80%

ProgressBar::normal(40)->visible()
ProgressBar::normal(80)->visible()

You can override the default message. Use a string compatible with sprintf(), that has space for one parameter.

Here is a value! 40%
Here is a value! 80%

ProgressBar::normal(40)->visible('Here is a value! %s%%')
ProgressBar::normal(80)->visible('Here is a value! %s%%')

Stacking

Progress bars can be stacked together if you wish, using the stack() method.

20% complete
10% complete
30% complete
0%

ProgressBar::stack(
    [
        ['animated', 'value=20'],
        ['success', 'value=10'],
        ['striped', 'value=30'],
        ['visible']
    ]
)

stack() accepts an array of arrays. Each inner array should have a list of method names and arguments that you would like to use to generate each progress bar.

Creating media objects is simple! Just pass an array into the withContents() method.

Cras sit amet

Cras sit amet

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
MediaObject::withContents(
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Cras sit amet',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.'
    ]
)
You must provide an image and body key. The link and heading keys are optional.

Nested

Nesting of media objects is supported by using the nest array key. This array will be passed into a withContents() method, so use the keys you would use there.

Nesting a Media Object

Nesting a Media Object

Oh boy, here comes a nested object!
Cras sit amet

Cras sit amet

I am all nested and other things like that

MediaObject::withContents(
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Nesting a Media Object',
        'body' => 'Oh boy, here comes a nested object!',
        'nest' => MediaObject::withContents(
            [
                'image' => '//placehold.it/64x64',
                'link' => '#',
                'heading' => 'Cras sit amet',
                'body' => 'I am all nested and other things like that'
            ])
    ]
)

Floating Right

If you instead want the image to appear on the right, then use the position array key.

Media Object on the right

Media Object on the right

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

MediaObject::withContents(
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Media Object on the right',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.',
        'position' => 'right'
    ]
)

As List

We automatically turn a multiple MediaObjects into a list. You can also force a list by using the asList() method (if, for example, you only have one object).

Using asList()

  • Cras sit amet

    Cras sit amet

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

Passing in multiple arrays

  • Cras sit amet

    Cras sit amet

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
  • Cras sit amet

    Cras sit amet

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.

// Using asList
MediaObject::withContents([
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Cras sit amet',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.'
    ]
)->asList()

// Multiple Inner Arrays
MediaObject::withContents([
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Cras sit amet',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.'
    ],
    [
        'image' => '//placehold.it/64x64',
        'link' => '#',
        'heading' => 'Cras sit amet',
        'body' => 'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.'
    ],
])

All you need to do is call Panel::$type($attributes) which will give you a panel on its own. Then use the chained methods withHeader($header), withBody($body) and withFooter($footer) to fill it with the information you need:

Type Example Code
Normal

Normal

Panel body
  Panel::normal()

       ->withHeader('Normal')

       ->withBody('Panel body')

       ->footer('Panel footer')
  
Danger

Danger

Panel body
  Panel::danger()

       ->withHeader('Danger')

       ->withBody('Panel body')

       ->footer('Panel footer')
  
Info

Info

Panel body
  Panel::info()

       ->withHeader('Info')

       ->withBody('Panel body')

       ->footer('Panel footer')
  
Success

Success

Panel body
  Panel::success()

       ->withHeader('Success')

       ->withBody('Panel body')

       ->footer('Panel footer')
  
Warning

Warning

Panel body
  Panel::warning()

       ->withHeader('Warning')

       ->withBody('Panel body')

       ->footer('Panel footer')
  

Thumbnails allow you to render images and similar inside the Bootstrap grid system.

Thumbnail::image('//placehold.it/350x350')

You can give the thumbnail a caption with the caption() method.

Lorem ipsum dolor sit amet, nemore deterruisset te has, usu ea urbanitas assentior. An summo omnium abhorreant vim, cum libris legimus eligendi an. Ea nec habeo cotidieque efficiantur, mea vide exerci ex. In nam enim delectus complectitur. Eu sea ridens hendrerit consectetuer, in cum vitae voluptua, usu at tritani feugiat.
Lorem ipsum dolor sit amet, nemore deterruisset te has, usu ea urbanitas assentior. An summo omnium abhorreant vim, cum libris legimus eligendi an. Ea nec habeo cotidieque efficiantur, mea vide exerci ex. In nam enim delectus complectitur. Eu sea ridens hendrerit consectetuer, in cum vitae voluptua, usu at tritani feugiat.
Lorem ipsum dolor sit amet, nemore deterruisset te has, usu ea urbanitas assentior. An summo omnium abhorreant vim, cum libris legimus eligendi an. Ea nec habeo cotidieque efficiantur, mea vide exerci ex. In nam enim delectus complectitur. Eu sea ridens hendrerit consectetuer, in cum vitae voluptua, usu at tritani feugiat.
Lorem ipsum dolor sit amet, nemore deterruisset te has, usu ea urbanitas assentior. An summo omnium abhorreant vim, cum libris legimus eligendi an. Ea nec habeo cotidieque efficiantur, mea vide exerci ex. In nam enim delectus complectitur. Eu sea ridens hendrerit consectetuer, in cum vitae voluptua, usu at tritani feugiat.
Thumbnail::image('//placehold.it/350x350')->caption('Lorem ipsum dolor sit amet, nemore deterruisset te has, usu ea urbanitas assentior. An summo omnium abhorreant vim, cum libris legimus eligendi an. Ea nec habeo cotidieque efficiantur, mea vide exerci ex. In nam enim delectus complectitur. Eu sea ridens hendrerit consectetuer, in cum vitae voluptua, usu at tritani feugiat.')