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

Group buttons sizing

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

Nesting

creat with below code
                                        
                                            <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

Button with js elements

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

Button with checkbox


Button with Radiobutton