Components

Laravel Bootstrapper components provides navigation, alerts, pagination, and much more.

Button groups

Use button groups to join multiple buttons together as one composite component. Build them with a series of Button elements.

Default example

Here's how you create a standard button group built with normal buttons:

echo ButtonGroup::open();
  echo Button::normal('Left');
  echo Button::normal('Middle'); 
  echo Button::normal('Right'); 
echo ButtonGroup::close();

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.

More Info

echo ButtonGroup::open(ButtonGroup::TOGGLE_CHECKBOX);
  echo Button::danger_normal('Left');
  echo Button::danger_normal('Middle'); 
  echo Button::danger_normal('Right'); 
echo ButtonGroup::close(); 

echo ButtonGroup::open(ButtonGroup::TOGGLE_RADIO);
  echo Button::primary_normal('Left');
  echo Button::primary_normal('Middle'); 
  echo Button::primary_normal('Right'); 
echo ButtonGroup::close(); 

Toolbar example

You can combine sets of ButtonGroup into a ButtonToolbar for more complex components.

echo ButtonToolbar::open();
  echo ButtonGroup::open();
    ...
  echo ButtonGroup::close();

  echo ButtonGroup::open();
    ...
  echo ButtonGroup::close();
echo ButtonToolbar::close();

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own ButtonGroup within a ButtonToolbar for proper rendering.

Button dropdowns

Overview and examples

Dropdown button functions expect a value, array of links, and an optional attributes array. Any optional attributes will be applied to the top level div.

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Example call

Similar to the call below you can use DropdownButton::primary, DropdownButton::danger, DropdownButton::warning, DropdownButton::success, DropdownButton::info, or DropdownButton::inverse.

echo DropdownButton::normal('Action', 
    Navigation::links(
      array(
        array('Action', '#'),
        array('Another action', '#'),
        array('Something else here', '#'),
        array(Navigation::DIVIDER),
        array('Separated link', '#'),
      )
    )
  ); 

Works with all button sizes

Button dropdowns work at any size. your button sizes to DropdownButton::large, DropdownButton::small, or DropdownButton::mini.

Combined Calls

You can mix and match the dropdown button color and size. Simply add an underscore between types. Example: DropdownButton::large_danger or DropdownButton::mini_inverse and pass in the same link array.

Requires javascript

Dropdown buttons require the bootstrap.js to be include.


Split button dropdowns

Overview and examples

You can create Split button dropdowns just like normal Dropdown Buttons, just use the DropdownButton:: class instead of DropdownButton::

Sizes

Button dropdowns work at any size. your button sizes to DropdownButton::large, DropdownButton::small, or DropdownButton::mini.

Right Align Menu

You can right align the dropdown menu by calling pull_right().

Example markup

echo DropdownButton::normal('Action',
  Navigation::links(
    array(
      array('Action', '#'),
      array('Another action', '#'),
      array('Something else here', '#'),
      array(Navigation::DIVIDER),
      array('Separated link', '#'),
    )
  )
)->split(); 

Dropup menus

If you want your dropdown menu to go above the button (dropup) you can simply call dropup().

echo DropdownButton::normal('Right dropup',
  Navigation::links(
    array(
      array('Action', '#'),
      array('Another action', '#'),
      array('Something else here', '#'),
      array(Navigation::DIVIDER),
      array('Separated link', '#'),
    )
  )
)->pull_right()->dropup()->split();

Multicon-page pagination

You can use the Paginator class as a drop in replacement for Laravel's Paginator class because it extends the Laravel version and only changes the output markup. View Laravel Pagination Docs

Link Function

As you can see Bootstrapper adds an extra parameter to links, the Laravel's make Paginator function.

public function links($adjacent = 3, $alignment = self::ALIGN_LEFT, $size = self::SIZE_DEFAULT)

Sizes

Want larger or smaller pagination? Pass in Paginator::SIZE_MINI, Paginator::SIZE_SMALL, or Paginator::SIZE_LARGE.

$orders = DB::table('orders')->paginate(15);

echo $orders->links();

//Right Alignment
echo $orders->links(3, Paginator::ALIGN_LEFT, Paginator::SIZE_LARGE);
echo $orders->links(3);
echo $orders->links(3, Paginator::ALIGN_LEFT, Paginator::SIZE_SMALL);
echo $orders->links(3, Paginator::ALIGN_LEFT, Paginator::SIZE_MINI);

Flexible alignment

The links function has an optional second parameter for alignment that takes: Paginator::ALIGN_LEFT, Paginator::ALIGN_CENTER, or Paginator::ALIGN_RIGHT.

Laravel standard call

$orders = DB::table('orders')->paginate(15);

echo $orders->links();

//Right Alignment
echo $orders->links(3, Paginator::ALIGN_RIGHT);

Alignment examples

Left (default)
Right

Pager For quick previous and next links

Pager Function

Pager is a Bootstrapper function that only add a Previous and Next button. The optional align paramenter left and right aligns the buttons if set to true.

public function pager($align = false)

Default example

By default, the pager centers links.

echo $orders->pager();

Aligned links

Alternatively, you can align each link to the sides:

echo $orders->pager(true);

Available functions

Labels Function call
Default echo Label::normal('Default');
Success echo Label::success('Success');
Warning echo Label::warning('Warning');
Important echo Label::important('Important');
Info echo Label::info('Info');
Inverse echo Label::inverse('Inverse');

Available functions

Example Function call
1 echo Badge::normal(1);
2 echo Badge::success(2);
4 echo Badge::warning(4);
6 echo Badge::important(6);
8 echo Badge::info(8);
10 echo Badge::inverse(10);

Lightweight defaults

Functions

  • success()
  • info()
  • warning()
  • error()
  • danger()

You can disabled the close option by calling the open function. Alert::info('message')->open()


JavaScript

The closing of the alert is dynamicly handled by Bootstrap's javascript. You don't need to add any custom javascript on your site for this functionality. Want more details about Bootstrap Alerts click the button below.

Info on Alerts

Example warning

×Warning! Best check yo self, you're not looking too good.
echo Alert::warning("<strong>Warning!</strong> Best check yo self, you're not looking too good.");	

If you want more padding around your alert include the .alert-block class.

×Warning Look at all this extra room I have to strech out in.
echo Alert::warning("<strong>Warning!</strong> Look at all this extra room I have to strech out in.")->block();	

If you want a block heading add .alert-heading class to your heading within the alert message.

×

Warning!

Now I'm extra important with my block heading.
echo Alert::warning("<h4 class=\"alert-heading\">Warning!</h4> Now I'm extra important with my block heading.")->block();	

Other Alert Types

Error or danger

×Oh snap! Change a few things up and try submitting again.
echo Alert::error("<strong>Oh snap!</strong> Change a few things up and try submitting again.");

Success

×Well done! You successfully read this important alert message.
echo Alert::success("<strong>Well done!</strong> You successfully read this important alert message.");

Information

×Heads up! This alert needs your attention, but it's not super important.
echo Alert::info("<strong>Heads up!</strong> This alert needs your attention, but it's not super important.");

Examples and markup

Basic

Default progress bar with a vertical gradient.

echo Progress::normal(60);

Striped

Uses a gradient to create a striped effect (no IE).

echo Progress::normal_striped(20);

Animated

Takes the striped example and animates it (no IE).

echo Progress::normal_striped_active(40);

Options and browser support

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

Striped bars

Similar to the solid colors, we have varied striped progress bars.

Functions

  • info()
  • success()
  • warning()
  • danger()

You can add _striped and _active to any of the core functions to added these features.

Examples: Progress::info_striped(75), Progress::warning_striped_active(40)

Stacked

echo Progress::normal(array(35 => 'success', 20 => 'warning', 0 => 'danger'));

More info

Check out the Bootstrap documentation for more information about the progress bars and browser support.

Info on Progress

Automatic

echo Progress::automatic(20);
echo Progress::automatic(40);
echo Progress::automatic_striped(60);
echo Progress::automatic_striped_active(80);

Basic Example

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.

 

//Simple form
echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64'); ?>

//With detailed image
echo MediaObject::create('Cras sit amet...')
  ->with_image('http://placehold.it/64x64', 'alt text');

With Title

Media heading

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.

 

// Add a title to the media object
echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
  ->with_title('<h4 class="media-heading">Media heading</h4>');

// Automatic titles wrapping
echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
  ->with_h4('Media heading');

Nested

Media heading

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.

Media heading

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.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

Media heading

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.

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

 

// Add a title to the media object
echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
    ->with_h4('Media heading')
    ->nest(
        MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
        ->with_h4('Media heading')
        ->nest(
            MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
            ->with_h4('Media heading')
        )
    )->nest(
        MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
        ->with_h4('Media heading')
    )->nest(
        MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
        ->with_h4('Pull Right')
        ->pull_right()
    );

As List

  • Media heading

    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.
  • Media heading

    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.

 

echo MediaObject::open_list();
  echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
    ->with_h4('Media heading');
  echo MediaObject::create('Cras sit amet...', 'http://placehold.it/64x64')
    ->with_h4('Media heading');
echo MediaObject::close_list();