@extends('layouts.sidebar')
@section('css')
@endsection
@section('content')
    <div class="text-center"><h3>@lang('module.bars.sidebar_construction')</h3></div>
    <div class="page-content">
        <div class="row">
            <div id="change-transitions" class="row">
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounce"
                                class="btn btn-success btn-block">bounce
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="flash"
                                class="btn btn-success btn-block">flash
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="pulse"
                                class="btn btn-success btn-block">pulse
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rubberBand"
                                class="btn btn-success btn-block">rubberBand
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="shake"
                                class="btn btn-success btn-block">shake
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="swing"
                                class="btn btn-success btn-block">swing
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="tada"
                                class="btn btn-success btn-block">tada
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="wobble"
                                class="btn btn-success btn-block">wobble
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounceIn"
                                class="btn btn-success btn-block">bounceIn
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounceInDown"
                                class="btn btn-success btn-block">bounceInDown
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounceInLeft"
                                class="btn btn-success btn-block">bounceInLeft
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounceInRight"
                                class="btn btn-success btn-block">bounceInRight
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="bounceInUp"
                                class="btn btn-success btn-block">bounceInUp
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeIn"
                                class="btn btn-success btn-block">fadeIn
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInDown"
                                class="btn btn-success btn-block">fadeInDown
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInDownBig"
                                class="btn btn-success btn-block">fadeInDownBig
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInLeft"
                                class="btn btn-success btn-block">fadeInLeft
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInLeftBig"
                                class="btn btn-success btn-block">fadeInLeftBig
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInRight"
                                class="btn btn-success btn-block">fadeInRight
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInRightBig"
                                class="btn btn-success btn-block">fadeInRightBig
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInUp"
                                class="btn btn-success btn-block">fadeInUp
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="fadeInUpBig"
                                class="btn btn-success btn-block">fadeInUpBig
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="flip"
                                class="btn btn-success btn-block">flip
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="flipInX"
                                class="btn btn-success btn-block">flipInX
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="flipInY"
                                class="btn btn-success btn-block">flipInY
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="lightSpeedIn"
                                class="btn btn-success btn-block">lightSpeedIn
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rotateIn"
                                class="btn btn-success btn-block">rotateIn
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rotateInDownLeft"
                                class="btn btn-success btn-block">rotateInDownLeft
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rotateInDownRight"
                                class="btn btn-success btn-block">rotateInDownRight
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rotateInUpLeft"
                                class="btn btn-success btn-block">rotateInUpLeft
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rotateInUpRight"
                                class="btn btn-success btn-block">rotateInUpRight
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="slideInDown"
                                class="btn btn-success btn-block">slideInDown
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="slideInLeft"
                                class="btn btn-success btn-block">slideInLeft
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="slideInRight"
                                class="btn btn-success btn-block">slideInRight
                        </button>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="box-placeholder">
                        <button data-toggle="dropdown" data-value="rollIn"
                                class="btn btn-success btn-block">rollIn
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script src="{{asset('js/bars/animation.js')}}"></script>
@endsection