Xtreme admin Template - The Ultimate Multipurpose admin template

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

#### Split-button-dropdowns

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

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

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

Male
Female
N/A

#### Button with checkbox

Checked
Checkbox 2
Checkbox 3

#### Button with Radiobutton

Selected
Radio 2
Radio 3

#### Direction of the Dropdown

##### Trigger dropdown menus above elements by adding `.dropup` to the parent element.

##### Dropdowm Right Side

##### Dropdown Up Side

##### Dropdowm Left Side

#### Menu Alignment

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

#### Responsive Alignment

#### Different Menu Content

#### Dropdown Options

#### 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.`

Checked

#### Radio buttons with Click[Checked] event

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

Active Radio Radio

##### Layout Settings

Dark Theme
Collapse Sidebar
Fixed Sidebar
Fixed Header
Boxed Layout

##### Logo Backgrounds

##### Navbar Backgrounds

##### Sidebar Backgrounds

- ##### Pavan kumar

  Just see the my admin! 9:30 AM

  ##### Sonu Nigam

  I've sung a song! See you at 9:10 AM

  ##### Arijit Sinh

  I am a singer! 9:08 AM

  ##### Nirav Joshi

  Just see the my admin! 9:02 AM

  ##### Sunil Joshi

  Just see the my admin! 9:02 AM

  ##### Akshay Kumar

  Just see the my admin! 9:02 AM

  ##### Pavan kumar

  Just see the my admin! 9:02 AM

  ##### Varun Dhavan

  Just see the my admin! 9:02 AM

###### Activity Timeline

Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger
Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger