Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-503.34.1.el9_5.x86_64

PHP Version:

8.2.30

User:

u329947844

Directory:

/home/u329947844/domains/style29.in/public_html/admin/html

Free Space:

10.3 TB

🔧 Quick Actions

✏️ Editing: ui-buttons.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Buttons | Fonik - Responsive Bootstrap 5 Admin Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    
    <link rel="shortcut icon" href="assets/images/favicon.ico">

<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />

<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
    
    <link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />

</head>

<div id="preloader">
    <div id="status">
        <div class="spinner"></div>
    </div>
</div>

<div id="layout-wrapper">

<div class="d-none d-sm-block ms-2">
                    <h4 class="page-title font-size-18">Buttons</h4>
                </div>

</div>

<div class="search-wrap" id="search-wrap">
                <div class="search-bar">
                    <input class="search-input form-control" placeholder="Search" />
                    <a href="#" class="close-search toggle-search" data-bs-target="#search-wrap">
                        <i class="mdi mdi-close-circle"></i>
                    </a>
                </div>
            </div>

<div class="dropdown d-none d-md-block ms-2">
                    <button type="button" class="btn header-item waves-effect" data-bs-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        <img class="me-2" src="assets/images/flags/us_flag.jpg" alt="Header Language" height="16"> English
                        <span class="mdi mdi-chevron-down"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/germany_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> German </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/italy_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Italian </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/french_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> French </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/spain_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Spanish </span>
                        </a>

<a href="javascript:void(0);" class="dropdown-item notify-item">
                            <img src="assets/images/flags/russia_flag.jpg" alt="user-image" class="me-1" height="12"> <span
                                class="align-middle"> Russian </span>
                        </a>
                    </div>
                </div>

<div class="dropdown d-inline-block ms-2">
                    <button type="button" class="btn header-item noti-icon waves-effect"
                        id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <i class="ion ion-md-notifications"></i>
                        <span class="badge bg-danger rounded-pill">3</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0"
                        aria-labelledby="page-header-notifications-dropdown">
                        <div class="p-3">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h5 class="m-0 font-size-16"> Notification (3) </h5>
                                </div>
                            </div>
                        </div>
                        <div data-simplebar style="max-height: 230px;">
                            <a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-success rounded-circle font-size-16">
                                            <i class="mdi mdi-cart-outline"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">Your order is placed</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">Dummy text of the printing and typesetting industry.</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

<a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-warning rounded-circle font-size-16">
                                            <i class="mdi mdi-message-text-outline"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">New Message received</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">You have 87 unread messages</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

<a href="" class="text-reset notification-item">
                                <div class="media d-flex">
                                    <div class="avatar-xs me-3">
                                        <span class="avatar-title bg-info rounded-circle font-size-16">
                                            <i class="mdi mdi-glass-cocktail"></i>
                                        </span>
                                    </div>
                                    <div class="flex-1">
                                        <h6 class="mt-0 font-size-15 mb-1">Your item is shipped</h6>
                                        <div class="font-size-12 text-muted">
                                            <p class="mb-1">It is a long established fact that a reader will</p>
                                        </div>
                                    </div>
                                </div>
                            </a>

</div>
                        <div class="p-2 border-top text-center">
                            <a class="btn btn-sm btn-link font-size-14 w-100" href="javascript:void(0)">
                                View all
                            </a>
                        </div>
                    </div>
                </div>

<div class="dropdown d-inline-block ms-2">
                    <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle header-profile-user" src="assets/images/users/avatar-1.jpg"
                            alt="Header Avatar">
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        
                        <a class="dropdown-item" href="#"><i class="dripicons-user font-size-16 align-middle me-2"></i>
                            Profile</a>
                        <a class="dropdown-item" href="#"><i class="dripicons-wallet font-size-16 align-middle me-2"></i> My
                            Wallet</a>
                        <a class="dropdown-item d-block" href="#"><span class="badge bg-success float-end">5</span><i
                                class="dripicons-gear font-size-16 align-middle me-2"></i> Settings</a>
                        <a class="dropdown-item" href="#"><i class="dripicons-lock font-size-16 align-middle me-2"></i> Lock
                            screen</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="dripicons-exit font-size-16 align-middle me-2"></i>
                            Logout</a>
                    </div>
                </div>

</div>
        </div>
    </header>

<div class="vertical-menu">

<div id="sidebar-menu">
                
                <ul class="metismenu list-unstyled" id="side-menu">
                    <li class="menu-title">Main</li>

<li>
                        <a href="index.html" class="waves-effect">
                            <i class="dripicons-device-desktop"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-suitcase"></i>
                            <span> User Interface </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="ui-buttons.html">Buttons</a></li>
                            <li><a href="ui-cards.html">Cards</a></li>
                            <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
                            <li><a href="ui-modals.html">Modals</a></li>
                            <li><a href="ui-images.html">Images</a></li>
                            <li><a href="ui-alerts.html">Alerts</a></li>
                            <li><a href="ui-progressbars.html">Progress Bars</a></li>
                            <li><a href="ui-dropdowns.html">Dropdowns</a></li>
                            <li><a href="ui-lightbox.html">Lightbox</a></li>
                            <li><a href="ui-navs.html">Navs</a></li>
                            <li><a href="ui-pagination.html">Pagination</a></li>
                            <li><a href="ui-popover-tooltips.html">Popover &amp; Tooltips</a></li>
                            <li><a href="ui-badge.html">Badge</a></li>
                            <li><a href="ui-carousel.html">Carousel</a></li>
                            <li><a href="ui-video.html">Video</a></li>
                            <li><a href="ui-typography.html">Typography</a></li>
                            <li><a href="ui-sweet-alert.html">Sweetalert</a></li>
                            <li><a href="ui-grid.html">Grid</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-mail"></i>
                            <span> Email </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="email-inbox.html">Inbox</a></li>
                            <li><a href="email-read.html">Email Read</a></li>
                            <li><a href="email-compose.html">Email Compose</a></li>
                        </ul>
                    </li>

<li>
                        <a href="calendar.html" class=" waves-effect">
                            <i class="dripicons-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-card"></i>
                            <span> Contact</span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="contacts-grid.html">Contact Grid</a></li>
                            <li><a href="contacts-list.html">Contact List</a></li>
                            <li><a href="contacts-profile.html">Profile</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="waves-effect">
                            <i class="dripicons-blog"></i><span class="badge rounded-pill bg-success float-end">7</span>
                            <span> Forms </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="form-elements.html">Form Elements</a></li>
                            <li><a href="form-validation.html">Form Validation</a></li>
                            <li><a href="form-advanced.html">Form Advanced</a></li>
                            <li><a href="form-editors.html">Form Editor</a></li>
                            <li><a href="form-uploads.html">Form File Upload</a></li>
                            <li><a href="form-mask.html">Form Mask</a></li>
                            <li><a href="form-xeditable.html">Form Xeditable</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-box"></i>
                            <span> Icons </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="icons-material.html">Material Design</a></li>
                            <li><a href="icons-ion.html">Ion Icons</a></li>
                            <li><a href="icons-fontawesome.html">Font Awesome</a></li>
                            <li><a href="icons-themify.html">Themify Icons</a></li>
                            <li><a href="icons-dripicons.html">Dripicons</a></li>
                            <li><a href="icons-typicons.html">Typicons Icons</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-graph-line"></i>
                            <span> Charts </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="charts-morris.html">Morris Charts</a></li>
                            <li><a href="charts-chartist.html">Chartist Charts</a></li>
                            <li><a href="charts-chartjs.html">Chartjs Charts</a></li>
                            <li><a href="charts-flot.html">Flot Charts</a></li>
                            <li><a href="charts-c3.html">C3 Charts</a></li>
                            <li><a href="charts-other.html">Jquery Knob Charts</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-list"></i>
                            <span> Tables </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="tables-basic.html">Basic Tables</a></li>
                            <li><a href="tables-datatable.html">Data Tables</a></li>
                            <li><a href="tables-responsive.html">Responsive Table</a></li>
                            <li><a href="tables-editable.html">Editable Table</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="waves-effect">
                            <i class="dripicons-map"></i><span class="badge rounded-pill bg-danger float-end">2</span>
                            <span> Maps </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="maps-google.html"> Google Maps</a></li>
                            <li><a href="maps-vector.html"> Vector Maps</a></li>
                        </ul>
                    </li>

<li class="menu-title">Extras</li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-inbox"></i>
                            <span> Layouts </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <span>Vertical</span>
                                </a>
                                <ul>
                                    <li><a href="layout-light-sidebar.html">Light Sidebar</a></li>
                                    <li><a href="layout-collapsed-sidebar.html">Collapsed Sidebar</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="javascript: void(0);" class="has-arrow waves-effect">
                                    <span>Horizontal</span>
                                </a>
                                <ul>
                                    <li><a href="layouts-horizontal.html">Horizontal</a></li>
                                    <li><a href="layouts-hori-boxed-width.html">Boxed Width</a></li>
                                </ul>
                            </li>

</ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-heart"></i>
                            <span> Advanced UI </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="advanced-animation.html">Animation</a></li>
                            <li><a href="advanced-highlight.html">Highlight</a></li>
                            <li><a href="advanced-rating.html">Ratings</a></li>
                            <li><a href="advanced-nestable.html">Nestable</a></li>
                            <li><a href="advanced-alertify.html">Alertify</a></li>
                            <li><a href="advanced-rangeslider.html">Range Slider</a></li>
                            <li><a href="advanced-sessiontimeout.html">Session Timeout</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-copy"></i>
                            <span> Pages </span>
                        </a>
                        <ul class="sub-menu" aria-expanded="false">
                            <li><a href="pages-timeline.html">Timeline</a></li>
                            <li><a href="pages-invoice.html">Invoice</a></li>
                            <li><a href="pages-directory.html">Directory</a></li>
                            <li><a href="pages-login.html">Login</a></li>
                            <li><a href="pages-register.html">Register</a></li>
                            <li><a href="pages-recoverpw.html">Recover Password</a></li>
                            <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                            <li><a href="pages-starter.html">Starter Page</a></li>
                            <li><a href="pages-404.html">Error 404</a></li>
                            <li><a href="pages-500.html">Error 500</a></li>
                        </ul>
                    </li>

<li>
                        <a href="javascript: void(0);" class="has-arrow waves-effect">
                            <i class="dripicons-network-1"></i>
                            <span>Multi Level</span>
                        </a>
                        <ul class="sub-menu" aria-expanded="true">
                            <li><a href="javascript: void(0);">Level 1.1</a></li>
                            <li><a href="javascript: void(0);" class="has-arrow">Level 1.2</a>
                                <ul class="sub-menu" aria-expanded="true">
                                    <li><a href="javascript: void(0);">Level 2.1</a></li>
                                    <li><a href="javascript: void(0);">Level 2.2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>

</ul>
            </div>
            
        </div>
    </div>

<div class="main-content">

<h4 class="card-title">Examples</h4>
                                <p class="card-title-desc card-text">Bootstrap includes six predefined button styles,
                                    each serving its own semantic purpose.</p>

<div class="button-items">
                                    <button type="button"
                                        class="btn btn-primary waves-effect waves-light">Primary</button>

<button type="button" class="btn btn-secondary waves-effect">Secondary</button>

<button type="button"
                                        class="btn btn-success waves-effect waves-light">Success</button>

<button type="button"
                                        class="btn btn-warning waves-effect waves-light">Warning</button>

<button type="button"
                                        class="btn btn-danger waves-effect waves-light">Danger</button>

<button type="button" class="btn btn-light waves-effect">Light</button>

<button type="button"
                                        class="btn btn-purple waves-effect waves-light">Purple</button>

<h4 class="card-title">Outline buttons</h4>
                                <p class="card-title-desc">In need of a button, but not the hefty background colors they
                                    bring? Replace the default modifier classes with the <code
                                        class="highlighter-rouge">.btn-outline-*</code> ones to remove all background
                                    images and colors on any button.</p>

<div class="button-items">
                                    <button type="button"
                                        class="btn btn-outline-primary waves-effect waves-light">Primary</button>
                                    <button type="button"
                                        class="btn btn-outline-secondary waves-effect">Secondary</button>
                                    <button type="button"
                                        class="btn btn-outline-success waves-effect waves-light">Success</button>
                                    <button type="button"
                                        class="btn btn-outline-info waves-effect waves-light">Info</button>
                                    <button type="button"
                                        class="btn btn-outline-warning waves-effect waves-light">Warning</button>
                                    <button type="button"
                                        class="btn btn-outline-danger waves-effect waves-light">Danger</button>
                                    <button type="button"
                                        class="btn btn-outline-dark waves-effect waves-light">Dark</button>
                                    <button type="button"
                                        class="btn btn-outline-pink waves-effect waves-light">Pink</button>
                                    <button type="button"
                                        class="btn btn-outline-purple waves-effect waves-light">Purple</button>
                                    <button type="button"
                                        class="btn btn-outline-light waves-effect waves-light">Light</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<h4 class="card-title">Button tags</h4>
                                <p class="card-title-desc">The <code class="highlighter-rouge">.btn</code> classes are
                                    designed to be used with the <code class="highlighter-rouge">&lt;button&gt;</code>
                                    element. However, you can also use these classes on <code
                                        class="highlighter-rouge">&lt;a&gt;</code> or <code
                                        class="highlighter-rouge">&lt;input&gt;</code> elements (though some browsers
                                    may apply a slightly different rendering).</p>

<div class="button-items">
                                    <a class="btn btn-primary waves-effect waves-light" href="#" role="button">Link</a>
                                    <button class="btn btn-success waves-effect waves-light"
                                        type="submit">Button</button>
                                    <input class="btn btn-info" type="button" value="Input">
                                    <input class="btn btn-purple" type="submit" value="Submit">
                                    <input class="btn btn-warning" type="reset" value="Reset">
                                </div>
                            </div>
                        </div>
                    </div>

<h4 class="card-title">Sizes</h4>
                                <p class="card-title-desc">Fancy larger or smaller buttons? Add
                                    <code class="highlighter-rouge">.btn-lg</code> or <code
                                        class="highlighter-rouge">.btn-sm</code> for additional sizes.
                                </p>

<div class="button-items">
                                    <button type="button" class="btn btn-primary btn-lg waves-effect waves-light">Large
                                        button</button>
                                    <button type="button" class="btn btn-secondary btn-lg waves-effect">Large
                                        button</button>
                                    <button type="button" class="btn btn-pink btn-sm waves-effect waves-light">Small
                                        button</button>
                                    <button type="button" class="btn btn-secondary btn-sm waves-effect">Small
                                        button</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<h4 class="card-title">Block Buttons</h4>
                                <p class="card-title-desc">Create block level buttons by adding class <code
                                        class="highlighter-rouge">.d-grid</code> to parent div.</p>

<div class="d-grid gap-3">
                                    <button type="button" class="btn btn-primary btn-lg waves-effect waves-light">Block
                                        level button</button>
                                    <button type="button" class="btn btn-secondary btn-sm waves-effect">Block level
                                        button</button>
                                </div>
                            </div>
                        </div>
                    </div>

<h4 class="card-title">Toggle states</h4>
                                <p class="card-title-desc">Add <code
                                        class="highlighter-rouge">data-toggle="button"</code> to toggle a button’s <code
                                        class="highlighter-rouge">active</code> state. If you’re pre-toggling a button,
                                    you must manually add the <code class="highlighter-rouge">.active</code> class
                                    <strong>and</strong> <code class="highlighter-rouge">aria-pressed="true"</code> to
                                    the
                                    <code class="highlighter-rouge">&lt;button&gt;</code>.
                                </p>

<div class="button-items">
                                    <button type="button" class="btn btn-success waves-effect waves-light"
                                        data-bs-toggle="button" aria-pressed="false">
                                        Single toggle
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<h4 class="card-title">Checkbox buttons</h4>
                                <p class="card-title-desc">Bootstrap’s <code class="highlighter-rouge">.button</code>
                                    styles can be applied to other elements, such as <code class="highlighter-rouge">
                                            &lt;label&gt;</code>s, to provide checkbox or radio style button toggling. Add
                                    <code class="highlighter-rouge">data-toggle="buttons"</code> to a
                                    <code class="highlighter-rouge">.btn-group</code> containing those modified buttons
                                    to enable toggling in their respective styles.
                                </p>
                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
                                    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
                                    <label class="btn btn-secondary mb-0" for="btncheck1">Checked-1</label>
                                    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
                                    <label class="btn btn-secondary mb-0" for="btncheck2">Checked-2</label>
                                    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
                                    <label class="btn btn-secondary mb-0" for="btncheck3">Checked-3</label>
                                </div>
                            </div>
                        </div>
                    </div>

<div class="col-lg-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Radio buttons</h4>
                                <p class="card-title-desc">Bootstrap’s <code class="highlighter-rouge">.button</code>
                                    styles can be applied to other elements, such as <code class="highlighter-rouge">
                                                    &lt;label&gt;</code>s, to provide checkbox or radio style button
                                    toggling. Add <code class="highlighter-rouge">data-toggle="buttons"</code> to a
                                    <code class="highlighter-rouge">.btn-group</code> containing those modified buttons
                                    to enable toggling in their respective styles.
                                </p>
                                <div class="btn-group role=" group" aria-label="Basic radio toggle button group">
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
                                        autocomplete="off" checked>
                                    <label class="btn btn-primary mb-0" for="btnradio1">Active</label>
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
                                        autocomplete="off">
                                    <label class="btn btn-primary mb-0" for="btnradio2">Radio</label>
                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
                                        autocomplete="off">
                                    <label class="btn btn-primary mb-0" for="btnradio3">Radio</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

<h4 class="card-title">Button group</h4>
                                <p class="card-title-desc">Wrap a series of buttons with <code
                                        class="highlighter-rouge">.btn</code> in <code
                                        class="highlighter-rouge">.btn-group</code>.</p>

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

<h4 class="card-title">Button toolbar</h4>
                                <p class="card-title-desc">Combine sets of button groups into button toolbars for more
                                    complex components. Use utility classes as needed to space out groups, buttons, and
                                    more.</p>

<h4 class="card-title">Sizing</h4>
                                <p class="card-title-desc">Instead of applying button sizing classes to every button in
                                    a group, just add <code class="highlighter-rouge">.btn-group-*</code> to each <code
                                        class="highlighter-rouge">.btn-group</code>, including each one when nesting
                                    multiple groups.</p>

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

<br />

<div class="btn-group mt-2" 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>

<br />

<div class="btn-group btn-group-sm mt-2" 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>
                        </div>
                    </div>

<h4 class="card-title">Vertical variation</h4>
                                <p class="card-title-desc">Make a set of buttons appear vertically stacked rather than
                                    horizontally. Split button dropdowns are not supported here.</p>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                    <button type="button" class="btn btn-secondary">Button</button>
                                    <div class="btn-group" role="group">
                                        <button id="btnGroupVerticalDrop1" type="button"
                                            class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            Dropdown <i class="mdi mdi-chevron-down"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                            <a class="dropdown-item" href="#">Dropdown link</a>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary">Button</button>
                                    <button type="button" class="btn btn-secondary">Button</button>
                                </div>

</div>
                        </div>
                    </div>
                </div>

</div>
            
        </div>

<footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        ©
                        <script>document.write(new Date().getFullYear())</script> Fonik<span class="d-none d-sm-inline-block"> -
                            Crafted with <i class="mdi mdi-heart text-danger"></i> by Themesbrand.</span>
                    </div>
                </div>
            </div>
        </footer>
    </div>

</div>

<div class="right-bar">
    <div data-simplebar class="h-100">
        <div class="rightbar-title px-3 py-4">
            <a href="javascript:void(0);" class="right-bar-toggle float-end">
                <i class="mdi mdi-close noti-icon"></i>
            </a>
            <h5 class="m-0">Settings</h5>
        </div>

<hr class="mt-0" />
        <h6 class="text-center mb-0">Choose Demo</h6>

<div class="p-4">
            <div class="mb-2">
                <img src="assets/images/layouts/layout-1.jpg" class="img-fluid img-thumbnail" alt="">
            </div>
            <div class="form-check form-switch mb-3">
                <input type="checkbox" class="form-check-input theme-choice" id="light-mode-switch" checked />
                <label class="form-check-label" for="light-mode-switch">Light Mode</label>
            </div>

<h6 class="mt-4">Select Custom Colors</h6>
            <div class="d-flex">
                
            <ul class="list-unstyled mb-0">
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-default" value="default" onchange="document.documentElement.setAttribute('data-theme-mode', 'default')" checked>
                    <label class="form-check-label" for="theme-default">Default</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-orange" value="orange" onchange="document.documentElement.setAttribute('data-theme-mode', 'orange')">
                    <label class="form-check-label" for="theme-orange">Orange</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-teal" value="teal" onchange="document.documentElement.setAttribute('data-theme-mode', 'teal')">
                    <label class="form-check-label" for="theme-teal">Teal</label>
                </li>
            </ul>

<ul class="list-unstyled mb-0 ms-4">
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-purple" value="purple" onchange="document.documentElement.setAttribute('data-theme-mode', 'purple')">
                    <label class="form-check-label" for="theme-purple">Purple</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-green" value="green" onchange="document.documentElement.setAttribute('data-theme-mode', 'green')">
                    <label class="form-check-label" for="theme-green">Green</label>
                </li>
                <li class="form-check">
                    <input class="form-check-input theme-color" type="radio" name="theme-mode"
                    id="theme-red" value="red" onchange="document.documentElement.setAttribute('data-theme-mode', 'red')">
                    <label class="form-check-label" for="theme-red">Red</label>
                </li>
            </ul>

</div>

</div>

</div>
    
</div>

<div class="rightbar-overlay"></div>

<script src="assets/libs/jquery/jquery.min.js"></script>
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
<script src="assets/libs/simplebar/simplebar.min.js"></script>
<script src="assets/libs/node-waves/waves.min.js"></script>

</body>

</html>

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: ui-buttons.html

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation