@extends('backend.layouts.app') @section('title') {{ 'Buttons | '.env('APP_NAME') }} @endsection @section('breadcrumbs') @include('backend.layouts.partials.breadcrumbs',['current' => 'Buttons']) @endsection @push('after-css') @endpush @section('content')

General Buttons

Use a classes btn btn-success to quickly create a General btn.
                            
                                <div class="button-group">
                                    <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
                                    <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
                                    <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
                                    <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
                                    <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
                                    <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
                                    <button type="button" class="btn waves-effect waves-light btn-light">Light</button>
                                    <button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>
                                </div>

Button Tags

The .btn classes are designed to be used with the .<button> element.
Link 
                            
                                <a class="btn btn-primary" href="#" role="button">Link</a>
                                <button class="btn btn-primary" type="submit">Button</button>
                                <input class="btn btn-primary" type="button" value="Input">
                                <input class="btn btn-primary" type="submit" value="Submit">
                                <input class="btn btn-primary" type="reset" value="Reset">

Button with outline

Use a classes btn btn-outline-success to quickly create a General btn.
                                    
                                         <div class="button-group">
                                            <button type="button" class="btn waves-effect waves-light btn-outline-primary">Primary</button>
                                            <button type="button" class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
                                            <button type="button" class="btn waves-effect waves-light btn-outline-success">Success</button>
                                            <button type="button" class="btn waves-effect waves-light btn-outline-info">Info</button>
                                            <button type="button" class="btn waves-effect waves-light btn-outline-warning">Warning</button>
                                            <button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
                                             <button type="button" class="btn waves-effect waves-light btn-outline-light">Light</button>
                                              <button type="button" class="btn waves-effect waves-light btn-outline-dark">Dark</button>
                                        </div>

Rounded Buttons

Use a classes btn btn-rounded btn-success to quickly create a General btn.
                            
                                <div class="button-group">
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-primary">Primary</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Secondary</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-success">Success</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-info">Info</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-warning">Warning</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-danger">Danger</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light">Light</button>
                                    <button type="button" class="btn waves-effect waves-light btn-rounded btn-dark">Dark</button>
                                </div>

Rounded outlined Buttons

Use a classes btn btn-rounded btn-outline-success to quickly create a General btn.
                                        
                                            <div class="button-group">
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Primary</button>
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Secondary</button>
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-success">Success</button>
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-info">Info</button>
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-warning">Warning</button>
                                                <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-danger">Danger</button>
                                                 <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-light">Light</button>
                                                  <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-dark">Dark</button>
                                            </div>

Button Sizes

Use a classes btn btn-lg btn-success to quickly create a General btn.
                                    
                                    <div class="button-group">
                                        <button type="button" class="btn waves-effect waves-light btn-lg btn-primary">Large .btn-lg </button>
                                        <button type="button" class="btn waves-effect waves-light btn-secondary">Normal .btn</button>
                                        <button type="button" class="btn waves-effect waves-light btn-sm btn-success">Small .btn-sm</button>
                                        <button type="button" class="btn waves-effect waves-light btn-xs btn-info">Tiny .btn-xs</button>
                                    </div>

Button Sizes with rounded

Use a classes btn btn-lg btn-rounded btn-success to create a btn.
                                    
                                        <div class="button-group">
                                            <button type="button" class="btn waves-effect waves-light btn-lg btn-rounded btn-primary">Large .btn-lg </button>
                                            <button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Normal .btn</button>
                                            <button type="button" class="btn waves-effect waves-light btn-rounded btn-sm btn-success">Small .btn-sm</button>
                                            <button type="button" class="btn waves-effect waves-light btn-rounded btn-xs btn-info">Tiny .btn-xs</button>
                                        </div>

Block buttons

Use a classes btn btn-block btn-success to quickly create a General btn.
                                    
                                        <div class="row button-group">
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-info">Info</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-success">Success</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-primary">Primary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-danger">Danger</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-secondary">Secondary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-warning">Warning</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-light">Light</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn waves-effect waves-light btn-block btn-dark">Dark</button>
                                            </div>
                                        </div>

Rounded Block buttons

Use a classes btn btn-block btn-success to quickly create a General btn.
                                    
                                         <div class="row button-group">
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-info">Info</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-success">Success</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-primary">Primary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-danger">Danger</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-secondary">Secondary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-warning">Warning</button>
                                            </div>
                                             <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-light">Light</button>
                                            </div>
                                             <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-dark">Dark</button>
                                            </div>
                                        </div>

Block outline buttons

Use a classes btn btn-block btn-outline-success to quickly create a General btn.
                                    
                                    <div class="row button-group">
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-info">Info</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-success">Success</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-primary">Primary</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-danger">Danger</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-warning">Warning</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-light">Light</button>
                                        </div>
                                        <div class="col-lg-2 col-md-4">
                                            <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
                                        </div>
                                    </div>

Rounded outline Block buttons

Use a classes btn btn-block btn-outline-success to quickly create a General btn.
                                    
                                        <div class="row button-group">
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-info">Info</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-success">Success</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-primary">Primary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-danger">Danger</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-secondary">Secondary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-warning">Warning</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-light">Light</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-rounded btn-block btn-outline-dark">Dark</button>
                                            </div>
                                        </div>

Large Block buttons

Use a classes btn btn-block btn-lg btn-success to quickly create a General btn.
                                    
                                         <div class="row button-group">
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-info">Info</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-success">Success</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-primary">Primary</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-danger">Danger</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-secondary">Second</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-warning">Warning</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-light">Light</button>
                                            </div>
                                            <div class="col-lg-2 col-md-4">
                                                <button type="button" class="btn btn-block btn-lg btn-dark">Dark</button>
                                            </div>
                                        </div>

Button with icon

Use a classes btn btn-success & i class ="fa fa-heart" to quickly create a General btn.
                                            
                                                <button type="button" class="btn btn-primary"><i class="fa fa-check"></i> Primary</button>
                                                <button type="button" class="btn btn-secondary">Secondary <i class="fa fa-heart"></i></button>
                                                <button type="button" class="btn btn-success"><i class="fa fa-check"></i> Success</button>
                                                <button type="button" class="btn btn-info"><i class="fa fa-heart"></i> Info</button>
                                                <button type="button" class="btn btn-warning"><i class="fa fa-heart"></i> Warning</button>
                                                <button type="button" class="btn btn-danger"><i class="fa fa-heart"></i> Danger</button>
                                                <button type="button" class="btn btn-light"><i class="fa fa-heart"></i> Light</button>
                                                <button type="button" class="btn btn-dark"><i class="fa fa-heart"></i> Dark</button>
                                            
                                        
                                            
                                                <button class="btn btn-primary waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
                                                <button class="btn btn-secondary waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-check"></i></span>Check</button>
                                                <button class="btn btn-info waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-warning waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-envelope-o"></i></span>Mail</button>
                                                <button class="btn btn-danger waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-light waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-dark waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                            
                                        
                                            
                                                <button type="button" class="btn btn-primary btn-rounded"><i class="fa fa-check"></i> Primary</button>
                                                <button type="button" class="btn btn-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button>
                                                <button type="button" class="btn btn-success btn-rounded"><i class="fa fa-check"></i> Success</button>
                                                <button type="button" class="btn btn-info btn-rounded"><i class="fa fa-heart"></i> Info</button>
                                                <button type="button" class="btn btn-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button>
                                                <button type="button" class="btn btn-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button>
                                                <button type="button" class="btn btn-light btn-rounded"><i class="fa fa-heart"></i> Danger</button>
                                                <button type="button" class="btn btn-dark btn-rounded"><i class="fa fa-heart"></i> Danger</button>
                                            
                                        
                                            
                                                <button type="button" class="btn btn-outline-primary"><i class="fa fa-check"></i> Primary</button>
                                                <button type="button" class="btn btn-outline-secondary">Secondary <i class="fa fa-heart"></i></button>
                                                <button type="button" class="btn btn-outline-success"><i class="fa fa-check"></i> Success</button>
                                                <button type="button" class="btn btn-outline-info"><i class="fa fa-heart"></i> Info</button>
                                                <button type="button" class="btn btn-outline-warning"><i class="fa fa-heart"></i> Warning</button>
                                                <button type="button" class="btn btn-outline-danger"><i class="fa fa-heart"></i> Danger</button>
                                                <button type="button" class="btn btn-outline-light"><i class="fa fa-heart"></i> Light</button>
                                                <button type="button" class="btn btn-outline-dark"><i class="fa fa-heart"></i> Dark</button>
                                            
                                        
                                            
                                                 <button class="btn btn-outline-primary waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
                                                <button class="btn btn-outline-secondary waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-check"></i></span>Check</button>
                                                <button class="btn btn-outline-info waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-outline-warning waves-effect waves-light" type="button"><span class="btn-label"><i class="far fa-envelope"></i></span>Mail</button>
                                                <button class="btn btn-outline-danger waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-outline-light waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                                <button class="btn btn-outline-dark waves-effect waves-light" type="button"><span class="btn-label"><i class="fa fa-heart"></i></span>Heart</button>
                                            
                                        
                                            
                                                <button type="button" class="btn btn-outline-primary btn-rounded"><i class="fa fa-check"></i> Primary</button>
                                                <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary <i class="fa fa-heart"></i></button>
                                                <button type="button" class="btn btn-outline-success btn-rounded"><i class="fa fa-check"></i> Success</button>
                                                <button type="button" class="btn btn-outline-info btn-rounded"><i class="fa fa-heart"></i> Info</button>
                                                <button type="button" class="btn btn-outline-warning btn-rounded"><i class="fa fa-heart"></i> Warning</button>
                                                <button type="button" class="btn btn-outline-danger btn-rounded"><i class="fa fa-heart"></i> Danger</button>
                                                <button type="button" class="btn btn-outline-light btn-rounded"><i class="fa fa-heart"></i> Light</button>
                                                <button type="button" class="btn btn-outline-dark btn-rounded"><i class="fa fa-heart"></i> Dark</button>

Button with Dropdown

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Split-button-dropdowns

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
                                            
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Action
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                                    </div>
                                                </div>                                                  
                                            
                                        
                                            
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-success">Action</button>
                                                    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                                        <div class="dropdown-divider"></div>
                                                        <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                                    </div>
                                                </div>

Large button dropdowns

Use a classes to create instant button
Action Another action Something else here
Action Another action Something else here 
                                            
                                                <div class="btn-group">
                                                    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Large button
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                                    </div>
                                                </div>
                                                <div class="btn-group">
                                                    <button class="btn btn-secondary btn-lg" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Large button
                                                    </button>
                                                    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        <span class="sr-only">Toggle Dropdown</span>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                                    </div>
                                                </div>

Animated Drop downs

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
                                    
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Action
                                        </button>
                                        <div class="dropdown-menu animated flipInX">
                                            <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                        </div>
                                    </div>

Animated Drop downs with icon

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
                                    
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="ti-trash"></i>
                                        </button>
                                        <div class="dropdown-menu animated flipInY">
                                            <a class="dropdown-item" href="javascript:void(0)">Action</a>
                                            <a class="dropdown-item" href="javascript:void(0)">Another action</a>
                                            <a class="dropdown-item" href="javascript:void(0)">Something else here</a>
                                            <div class="dropdown-divider"></div>
                                            <a class="dropdown-item" href="javascript:void(0)">Separated link</a>
                                        </div>
                                    </div>

Circle buttons

Use a classes btn btn-circle btn-success to quickly create a General btn.


Circle Large buttons

Use a classes btn btn-circle btn-lg btn-success to quickly create a General btn.


Circle xtra Large buttons

Use a classes btn btn-circle btn-xl btn-success to quickly create a General btn.
                                    
                                    <button type="button" class="btn btn-secondary btn-circle"><i class="fa fa-check"></i> </button>
                                    <button type="button" class="btn btn-secondary btn-circle btn-lg"><i class="fa fa-check"></i> </button>
                                    <button type="button" class="btn btn-secondary btn-circle btn-xl"><i class="fa fa-check"></i> </button>

Social buttons

Use a classes btn btn-facebook to quickly create a General btn.


With Circle buttons

Use a classes btn btn-circle btn-success to quickly create a General btn.


with rounded buttons

Use a classes btn btn-rounded btn-success to quickly create a General btn.
                                    
                                    <button class="btn btn-facebook waves-effect waves-light" type="button"> <i class="fa fa-facebook"></i> </button>  
                                    <button class="btn btn-facebook waves-effect btn-circle waves-light" type="button"> <i class="fa fa-facebook"></i> </button>
                                    <button class="btn btn-facebook waves-effect btn-rounded waves-light" type="button"> <i class="fa fa-facebook"></i> </button>

Group buttons

Wrap a series of buttons with .btn in .btn-group

Button toolbar pagination

Wrap a series of buttons with .btn in .btn-group
                                        
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-secondary">Left</button>
                                                <button type="button" class="btn btn-secondary">Middle</button>
                                                <button type="button" class="btn btn-secondary">Right</button>
                                            </div>
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
                                            </div>
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
                                                <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
                                                <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
                                            </div>                                            
                                        
                                    
                                        
                                            <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                                <div class="btn-group mr-2" role="group" aria-label="First group">
                                                    <button type="button" class="btn btn-secondary disabled">1</button>
                                                    <button type="button" class="btn btn-info">2</button>
                                                    <button type="button" class="btn btn-secondary">3</button>
                                                    <button type="button" class="btn btn-secondary">4</button>
                                                </div>
                                                <div class="btn-group mr-2" role="group" aria-label="Second group">
                                                    <button type="button" class="btn btn-secondary">5</button>
                                                    <button type="button" class="btn btn-secondary">6</button>
                                                    <button type="button" class="btn btn-secondary">7</button>
                                                </div>
                                                <div class="btn-group" role="group" aria-label="Third group">
                                                    <button type="button" class="btn btn-secondary">8</button>
                                                </div>
                                            </div>

Button Toolbar with Input Group

Button Toolbar with Jutify Content Input Group

                                            
                                                <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                                                  <div class="btn-group mr-2" role="group" aria-label="First group">
                                                    <button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
                                                  </div>
                                                  <div class="input-group">
                                                    <div class="input-group-prepend">
                                                      <div class="input-group-text" id="btnGroupAddon"><i class="ti-email"></i></div>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon">
                                                  </div>
                                                </div>
                                            
                                        
                                            
                                                <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
                                                  <div class="btn-group" role="group" aria-label="First group">
                                                    <button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
                                                    <button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
                                                  </div>
                                                  <div class="input-group">
                                                    <div class="input-group-prepend">
                                                      <div class="input-group-text" id="btnGroupAddon2"><i class="ti-email"></i></div>
                                                    </div>
                                                    <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon2">
                                                  </div>
                                                </div>

Group buttons sizing

Wrap a series of buttons with .btn in .btn-group

Nesting

creat with below code
Dropdown link Dropdown link 
                                        
                                            <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-secondary">Left</button>
                                                <button type="button" class="btn btn-secondary">Middle</button>
                                                <button type="button" class="btn btn-secondary">Right</button>
                                            </div>
                                            <div class="btn-group" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
                                                <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
                                            </div>
                                            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                                                <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
                                                <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
                                                <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
                                            </div>                                           
                                        
                                    
                                        
                                             <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                                <button type="button" class="btn btn-secondary">1</button>
                                                <button type="button" class="btn btn-secondary">2</button>
                                                <div class="btn-group" role="group">
                                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Dropdown
                                                    </button>
                                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                                        <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                                        <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
                                                    </div>
                                                </div>
                                            </div>

Vertical buttons

creat vertical button with class of .btn-group-vertical
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link
Dropdown link Dropdown link

Button with js elements

There are a few easy ways to quickly get started with Bootstrap, each one ...


Button with checkbox



Button with Radiobutton

Direction of the Dropdown

Trigger dropdown menus above elements by adding .dropup to the parent element.
Dropdowm Right Side
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Dropdown Up Side
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Dropdowm Left Side
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Menu Alignment

Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

Responsive Alignment

Different Menu Content

Dropdown header
Action Another action
Action Another action Something else here
Separated link

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

New around here? Sign up Forgot password?

Dropdown Options

Action Another action Something else here
Action Another action Something else here
Separated link

Toggle States [Button Plugin]

Add data-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the button.

Checkbox buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.

Radio buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.
@endsection @push('js') @endpush