#### Buttons

#### Default Buttons

Use the button classes on an `<a>`, `<button>`, or `<input>` element.

                                                            <button type="button" class="btn btn-primary">Primary</button>
                                                            <button type="button" class="btn btn-secondary">Secondary</button>
                                                            <button type="button" class="btn btn-success">Success</button>
                                                            <button type="button" class="btn btn-danger">Danger</button>
                                                            <button type="button" class="btn btn-warning">Warning</button>
                                                            <button type="button" class="btn btn-info">Info</button>
                                                            <button type="button" class="btn btn-light">Light</button>
                                                            <button type="button" class="btn btn-dark">Dark</button>
                                                            <button type="button" class="btn btn-link">Link</button>

#### Button Outline

Use a classes `.btn-outline-**` to quickly create a bordered buttons.

                                                            <button type="button" class="btn btn-outline-primary">Primary</button>
                                                            <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                                            <button type="button" class="btn btn-outline-success"><i class="uil-cloud-computing"></i> Success</button>
                                                            <button type="button" class="btn btn-outline-danger">Danger</button>
                                                            <button type="button" class="btn btn-outline-warning">Warning</button>
                                                            <button type="button" class="btn btn-outline-info"><i class="uil-circuit"></i> Info</button>
                                                            <button type="button" class="btn btn-outline-light">Light</button>
                                                            <button type="button" class="btn btn-outline-dark">Dark</button>

#### Button-Rounded

Add `.btn-rounded` to default button to get rounded corners.

                                                            <button type="button" class="btn btn-primary btn-rounded">Primary</button>
                                                            <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
                                                            <button type="button" class="btn btn-success btn-rounded">Success</button>
                                                            <button type="button" class="btn btn-danger btn-rounded">Danger</button>
                                                            <button type="button" class="btn btn-warning btn-rounded">Warning</button>
                                                            <button type="button" class="btn btn-info btn-rounded">Info</button>
                                                            <button type="button" class="btn btn-light btn-rounded">Light</button>
                                                            <button type="button" class="btn btn-dark btn-rounded">Dark</button>
                                                            <button type="button" class="btn btn-link btn-rounded">Link</button>

#### Button Outline Rounded

Use a classes `.btn-outline-**` to quickly create a bordered buttons.

                                                            <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
                                                            <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
                                                            <button type="button" class="btn btn-outline-success btn-rounded"><i class="uil-cloud-computing"></i> Success</button>
                                                            <button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
                                                            <button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
                                                            <button type="button" class="btn btn-outline-info btn-rounded"><i class="uil-circuit"></i> Info</button>
                                                            <button type="button" class="btn btn-outline-light btn-rounded">Light</button>
                                                            <button type="button" class="btn btn-outline-dark btn-rounded">Dark</button>

#### Button-Sizes

Add `.btn-lg`, `.btn-sm` for additional sizes.

                                                            <button type="button" class="btn btn-primary btn-lg">Large</button>
                                                            <button type="button" class="btn btn-info">Normal</button>
                                                            <button type="button" class="btn btn-success btn-sm">Small</button>

#### Button-Disabled

Add the `disabled` attribute to `<button>` buttons.

                                                            <button type="button" class="btn btn-info" disabled>Info</button>
                                                            <button type="button" class="btn btn-success" disabled>Success</button>
                                                            <button type="button" class="btn btn-danger" disabled>Danger</button>
                                                            <button type="button" class="btn btn-dark" disabled>Dark</button>

#### Icon Buttons

Icon only button.

                                                            <button type="button" class="btn btn-light"><i class="mdi mdi-heart-outline"></i> </button>
                                                            <button type="button" class="btn btn-danger"><i class="mdi mdi-window-close"></i> </button>
                                                            <button type="button" class="btn btn-dark"><i class="mdi mdi-music"></i> </button>
                                                            <button type="button" class="btn btn-primary"><i class="mdi mdi-star"></i> </button>
                                                            <button type="button" class="btn btn-success"><i class="mdi mdi-thumb-up-outline"></i> </button>
                                                            <button type="button" class="btn btn-info"><i class="mdi mdi-keyboard"></i> </button>
                                                            <button type="button" class="btn btn-warning"><i class="mdi mdi-wrench"></i> </button>

                                                            <button type="button" class="btn btn-light"><i class="mdi mdi-heart me-1"></i> <span>Like</span> </button>
                                                            <button type="button" class="btn btn-warning"><i class="mdi mdi-rocket me-1"></i> <span>Launch</span> </button>
                                                            <button type="button" class="btn btn-info"><i class="mdi mdi-cloud me-1"></i> <span>Cloud Hosting</span> </button>

                                                            <button type="button" class="btn btn-outline-success"><i class="uil-money-withdrawal"></i> Money</button>
                                                            <button type="button" class="btn btn-outline-primary"><i class="uil-paypal"></i> PayPal</button>
                                                            <button type="button" class="btn btn-outline-danger"><i class="uil-cog"></i> Settings</button>

#### Block Button

Create block level buttons by adding class `.d-grid` to parent div.

                                                            <div class="d-grid">
                                                                <button type="button" class="btn btn-primary">Block Button</button>
                                                                <button type="button" class="btn btn-sm btn-info">Block Button</button>
                                                                <button type="button" class="btn btn-xs btn-success">Block Button</button>
                                                            </div>
                                                            <!-- end d-grid -->

#### Button Group

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

                                                            <!-- Button Group -->
                                                            <div class="btn-group mb-2">
                                                                <button type="button" class="btn btn-light">Left</button>
                                                                <button type="button" class="btn btn-light">Middle</button>
                                                                <button type="button" class="btn btn-light">Right</button>
                                                            </div>

                                                            <!-- Button Group with Dropdowns-->
                                                            <div class="btn-group mb-2">
                                                                <button type="button" class="btn btn-light">1</button>
                                                                <button type="button" class="btn btn-primary">2</button>
                                                                <button type="button" class="btn btn-light">3</button>
                                                                <div class="btn-group">
                                                                    <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
                                                                    <div class="dropdown-menu">
                                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <!-- Button Group Vertical-->
                                                            <div class="btn-group-vertical mb-2">
                                                                <button type="button" class="btn btn-light">Top</button>
                                                                <button type="button" class="btn btn-light">Middle</button>
                                                                <button type="button" class="btn btn-light">Bottom</button>
                                                            </div>

                                                            <!-- Button Group Vertical with Dropdowns-->
                                                            <div class="btn-group-vertical mb-2">
                                                                <button type="button" class="btn btn-light">Button 1</button>
                                                                <button type="button" class="btn btn-light">Button 2</button>
                                                                <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Button 3 </button>
                                                                <div class="dropdown-menu">
                                                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                                                </div>
                                                            </div>

##### Settings

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now