Alpha - Material Design Admin Template

Introduction

The Alpha UI Framework is a premium Web Application Admin Dashboard built on top of Twitter Bootstrap Framework. It was created to be the most functional, clean and well designed theme for any types of backend applications. We have carefully designed all common elements.

We love when all updates are free. Once you’ve purchased Alpha, you’ll be able to download all future updates. If you like our theme don’t forget to rate us five stars. Good rating provides more and better updates in future!

If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Folder Structure

Documentation/
theme/
├─ assets/
│    ├─ css/
│    ├─ images/
│    ├─ js/
│    │    └─ pages/
│    └─ plugins/
└─ templates/
        └─ admin1/

HTML Structure

Head

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Responsive Admin Dashboard Template">
    <meta name="keywords" content="admin,dashboard">
    <meta name="author" content="stacks">
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no"/>
    <!-- The above 6 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
    <!-- Title -->
    <title>Alpha - Material Design Admin Template</title>

    <!-- Styles -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
    <link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../../assets/plugins/waves/waves.min.css" rel="stylesheet">

    
    <!-- Theme Styles -->
    <link href="../../assets/css/alpha.min.css" rel="stylesheet">
    <link href="../../assets/css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

Body

<body>
    <div class="loader">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <div class="alpha-app">
        <div class="page-header">
            <nav class="navbar navbar-expand primary">
                <section class="material-design-hamburger navigation-toggle">
                    <a href="javascript:void(0)" data-activates="slide-out" class="button-collapse material-design-hamburger__icon">
                        <span class="material-design-hamburger__layer"></span>
                    </a>
                </section>
                <a class="navbar-brand" href="#">Alpha</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <form class="form-inline my-2 my-lg-0 search">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <label for="search" class="active"><i class="material-icons search-icon">search</i></label>
                        <a href="#" id="close-search-input"><i class="material-icons">close</i></a>
                    </form>
                    <ul class="navbar-nav ml-auto">
                        <li class="d-md-block d-lg-none nav-item">
                            <a class="nav-link search-link" href="#"><i class="material-icons">search</i></a>
                        </li>
                        <li class="nav-item dropdown d-none d-lg-block">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="material-icons">notifications_none</i>
                                <span class="badge">4</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right dd-notifications" aria-labelledby="navbarDropdown">
                                <li class="notification-drop-title">Today</li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle cyan"><i class="material-icons">done</i></div>
                                        <div class="notification-text"><p><b>Alan Grey</b> uploaded new theme</p><span>7 min ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle deep-purple"><i class="material-icons">cached</i></div>
                                        <div class="notification-text"><p><b>Tom</b> updated status</p><span>14 min ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle red"><i class="material-icons">delete</i></div>
                                        <div class="notification-text"><p><b>Amily Lee</b> deleted account</p><span>28 min ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle cyan"><i class="material-icons">person_add</i></div>
                                        <div class="notification-text"><p><b>Tom Simpson</b> registered</p><span>2 hrs ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle green"><i class="material-icons">file_upload</i></div>
                                        <div class="notification-text"><p>Finished uploading files</p><span>4 hrs ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li class="notification-drop-title">Yestarday</li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle green"><i class="material-icons">security</i></div>
                                        <div class="notification-text"><p>Security issues fixed</p><span>16 hrs ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle indigo"><i class="material-icons">file_download</i></div>
                                        <div class="notification-text"><p>Finished downloading files</p><span>22 hrs ago</span></div>
                                    </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#!">
                                    <div class="notification">
                                        <div class="notification-icon circle cyan"><i class="material-icons">code</i></div>
                                        <div class="notification-text"><p>Code changes were saved</p><span>1 day ago</span></div>
                                    </div>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link right-sidebar-link" href="#"><i class="material-icons">more_vert</i></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div><!-- Page Header -->
        <div class="search-results">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="search-results-header">
                            <h4>Quick Search Results</h4>
                            <a href="#" id="closeSearch"><i class="material-icons">close</i></a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <ul class="search-result-list user-search">
                            <li>
                                <img src="../../assets/images/avatars/avatar2.png" alt="">
                                <p>Tom Manchester<br>(Works at <span class="search-input-value"></span>)</p>
                            </li>
                            <li>
                                <img src="../../assets/images/avatars/avatar1.png" alt="">
                                <p>Luke Williams<br>(Lives in <span class="search-input-value"></span>)</p>
                            </li>
                            <li>
                                <img src="../../assets/images/avatars/avatar4.jpg" alt="">
                                <p>People near:<br><span class="search-input-value"></span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="search-result-list social-search">
                            <li>
                                <div class="social-search-icon facebook-icon-bg">
                                    <i class="fab fa-facebook-f"></i>
                                </div>
                                <div class="social-search-text">
                                    <p><span class="search-input-value"></span> on Facebook</p>
                                </div>
                            </li>
                            <li>
                                <div class="social-search-icon twitter-icon-bg">
                                    <i class="fab fa-twitter"></i>
                                </div>
                                <div class="social-search-text">
                                    <p><span class="search-input-value"></span> on Twitter</p>
                                </div>
                            </li>
                            <li>
                                <div class="social-search-icon google-icon-bg">
                                    <i class="fab fa-google-plus-g"></i>
                                </div>
                                <div class="social-search-text">
                                    <p><span class="search-input-value"></span> on Google+</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <ul class="search-result-list article-search">
                            <li>
                                <p>Lorem ipsum dolor sit amet, consectetur <span class="search-input-value"></span> adipiscing elit, sunt in culpa quifdaasd quis.</p>
                                <span class="search-article-date">06 Dec, 2018</span>
                            </li>
                            <li>
                                <p>Duis non semper sapien. Morbi imperdiet velit in <span class="search-input-value"></span> bibendum lobortis. Integer arcu urna, elementum in pellentesque nec, finibus at nisi.</p>
                                <span class="search-article-date">19 Nov, 2017</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!-- Quick Search Results -->
        <div class="page-sidebar">
            <div class="page-sidebar-inner">
                <div class="page-sidebar-profile">
                    <div class="sidebar-profile-image">
                        <img src="../../assets/images/avatars/avatar1.png">
                    </div>
                    <div class="sidebar-profile-info">
                        <a href="javascript:void(0);" class="account-settings-link">
                            <p>David Doe</p>
                            <span>david@gmail.com<i class="material-icons float-right">arrow_drop_down</i></span>
                        </a>
                    </div>
                </div>
                <div class="page-sidebar-menu">
                    <div class="page-sidebar-settings hidden">
                        <ul class="sidebar-menu list-unstyled">
                            <li><a href="#" class="waves-effect waves-grey"><i class="material-icons">inbox</i>Inbox</a></li>
                            <li><a href="#" class="waves-effect waves-grey"><i class="material-icons">star_border</i>Starred</a></li>
                            <li><a href="#" class="waves-effect waves-grey"><i class="material-icons">done</i>Sent Mail</a></li>
                            <li><a href="#" class="waves-effect waves-grey"><i class="material-icons">history</i>History</a></li>
                            <li class="divider"></li>
                            <li><a href="#" class="waves-effect waves-grey"><i class="material-icons">exit_to_app</i>Sign Out</a></li>
                        </ul>
                    </div>
                    <div class="sidebar-accordion-menu">
                        <ul class="sidebar-menu list-unstyled">
                            <li>
                                <a href="index.html" class="waves-effect waves-grey">
                                    <i class="material-icons">settings_input_svideo</i>Dashboard
                                </a>
                            </li>
                            <li>
                                <a href="#" class="waves-effect waves-grey">
                                    <i class="material-icons">apps</i>Apps<i class="material-icons sub-arrow">keyboard_arrow_right</i>
                                </a>
                                <ul class="accordion-submenu list-unstyled">
                                    <li><a href="app-mailbox.html">Mailbox</a></li>
                                    <li><a href="app-file-manager.html">File Manager</a></li>
                                    <li><a href="app-todo.html">Todo</a></li>
                                </ul>
                            </li>
                            <li class="active-page">
                                <a href="#" class="waves-effect waves-grey shown-menu">
                                    <i class="material-icons">desktop_windows</i>Layouts<i class="material-icons sub-arrow">keyboard_arrow_right</i>
                                </a>
                                <ul class="accordion-submenu list-unstyled">
                                    <li><a href="layout-blank.html" class="active">Blank Page</a></li>
                                    <li><a href="layout-boxed.html">Boxed Layout</a></li>
                                    <li><a href="layout-hidden-sidebar.html">Hidden Sidebar</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="waves-effect waves-grey">
                                    <i class="material-icons">code</i>Components<i class="material-icons sub-arrow">keyboard_arrow_right</i>
                                </a>
                                <ul class="accordion-submenu list-unstyled">
                                    <li><a href="ui-alerts.html">Alerts</a></li>
                                    <li><a href="ui-accordion.html">Accordion</a></li>
                                    <li><a href="ui-badges.html">Badges</a></li>
                                    <li><a href="ui-breadcrumb.html">Breadcrumb</a></li>
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-button-group.html">Button Group</a></li>
                                    <li><a href="ui-cards.html">Cards</a></li>
                                    <li><a href="ui-code.html">Code</a></li>
                                    <li><a href="ui-color.html">Color</a></li>
                                    <li><a href="ui-dropdowns.html">Dropdowns</a></li>
                                    <li><a href="ui-icons.html">Icons</a></li>
                                    <li><a href="ui-list-group.html">List Group</a></li>
                                    <li><a href="ui-modal.html">Modal</a></li>
                                    <li><a href="ui-pagination.html">Pagination</a></li>
                                    <li><a href="ui-popovers.html">Popovers</a></li>
                                    <li><a href="ui-progress.html">Progress</a></li>
                                    <li><a href="ui-spinners.html">Spinners</a></li>
                                    <li><a href="ui-tooltips.html">Tooltips</a></li>
                                    <li><a href="ui-typography.html">Typography</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#" class="waves-effect waves-grey">
                                    <i class="material-icons">star_border</i>Plugins<i class="material-icons sub-arrow">keyboard_arrow_right</i>
                                </a>
                                <ul class="accordion-submenu list-unstyled">
                                    <li><a href="plugins-code-editor.html">Code Editor</a></li>
                                    <li><a href="plugins-nestable.html">Nestable List</a></li>
                                    <li><a href="plugins-masonry.html">Masonry</a></li>
                                    <li><a href="plugins-idle.html">Idle Timer</a></li>
                                    <li><a href="plugins-image-crop.html">Image Crop</a></li>
                                    <li><a href="plugins-image-zoom.html">Image Zoom</a></li>
                                    <li><a href="plugins-select2.html">Select2</a></li>
                                    <li><a href="plugins-plupload.html">Plupload</a></li>
                                    <li><a href="plugins-toastr.html">Toastr</a></li>
                                    <li><a href="plugins-range-sliders.html">Range Sliders</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="forms.html" class="waves-effect waves-grey">
                                    <i class="material-icons">mode_edit</i>Forms
                                </a>
                            </li>
                            <li>
                                <a href="tables.html" class="waves-effect waves-grey">
                                    <i class="material-icons">grid_on</i>Tables
                                </a>
                            </li>
                            <li>
                                <a href="charts.html" class="waves-effect waves-grey">
                                    <i class="material-icons">trending_up</i>Charts
                                </a>
                            </li>
                            <li>
                                <a href="#" class="waves-effect waves-grey">
                                    <i class="material-icons">tag_faces</i>Extra Pages<i class="material-icons sub-arrow">keyboard_arrow_right</i>
                                </a>
                                <ul class="accordion-submenu list-unstyled">
                                    <li><a href="pages-404.html">404</a></li>
                                    <li><a href="pages-500.html">500</a></li>
                                    <li><a href="pages-sign-in.html">Sign In</a></li>
                                    <li><a href="pages-sign-up.html">Sign Up</a></li>
                                    <li><a href="pages-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="pages-coming-soon.html">Coming Soon</a></li>
                                    <li><a href="pages-invoice.html">Invoice</a></li>
                                    <li><a href="pages-pricing-tables.html">Pricing Tables</a></li>
                                    <li><a href="pages-help-center.html">Help Center</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="sidebar-footer">
                    <p class="copyright">Stacks ©</p>
                    <a href="#!">Privacy</a> & <a href="#!">Terms</a>
                </div>
            </div>
        </div><!-- Left Sidebar -->
        <div class="page-content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <h2 class="page-title">Blank Page</h2>
                    </div>
                </div>
            </div>
            
        </div><!-- Page Content -->
        <div class="page-right-sidebar">
            <div class="page-right-sidebar-inner">
                <div class="right-sidebar-header">
                    <ul class="nav nav-tabs">
                        <li class="nav-item">
                            <a class="nav-link active" id="chat-tab" data-toggle="tab" href="#chat-content" role="tab" aria-controls="chat" aria-selected="true">Chat</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings-content" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="sidebar-messages tab-pane fade show active" id="chat-content" role="tabpanel" aria-labelledby="chat-content">
                        <p class="right-sidebar-heading">CHAT LIST</p>
                        <div class="chat-list">
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar1.png" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">John Doe</p>
                                        <span class="chat-message">Hello</span>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar4.jpg" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Tom Simpson</p>
                                        <span class="chat-message">How are you?</span>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar2.png" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Alan Grey</p>
                                        <span class="chat-message">Call me later</span></div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar3.png" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Michael Fisher</p>
                                        <span class="chat-message">How's it going?</span>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar1.png" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Amily Lee</p>
                                        <span class="chat-message">We're good</span>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar4.jpg" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Sandra Smith</p>
                                        <span class="chat-message">See you later!</span>
                                    </div>
                                </div>
                            </a>
                            <a href="javascript:void(0)" class="chat-message">
                                <div class="chat-item">
                                    <div class="chat-item-image">
                                        <img src="../../assets/images/avatars/avatar2.png" class="circle" alt="">
                                    </div>
                                    <div class="chat-item-info">
                                        <p class="chat-name">Sandra Smith</p>
                                        <span class="chat-message">Can we meet?</span>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="chat-sidebar-options">
                            <a href="#" class="float-left"><i class="material-icons">edit</i></a>
                            <a href="#" class="float-right"><i class="material-icons">settings</i></a>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="settings-content" role="tabpanel" aria-labelledby="settings-content">
                        <p class="right-sidebar-heading">SYSTEM</p>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Notifications</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-1" name="someSwitchOption001" type="checkbox" checked/>
                                        <label for="set-1" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Quick Results</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-2" name="someSwitchOption001" type="checkbox" checked/>
                                        <label for="set-2" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Auto Updates</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-3" name="someSwitchOption001" type="checkbox"/>
                                        <label for="set-3" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="right-sidebar-heading">ACCOUNT</p>
                        <div class="settings-list">
                            <div class="setting-item">
                                <div class="setting-text">Offline Mode</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-4" name="someSwitchOption001" type="checkbox"/>
                                        <label for="set-4" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Location</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-5" name="someSwitchOption001" type="checkbox"/>
                                        <label for="set-5" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Show Offline Users</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-6" name="someSwitchOption001" type="checkbox"/>
                                        <label for="set-6" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="setting-item">
                                <div class="setting-text">Save History</div>
                                <div class="setting-set">
                                    <div class="material-switch pull-right">
                                        <input id="set-7" name="someSwitchOption001" type="checkbox"/>
                                        <label for="set-7" class="label-default"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- Right Sidebar (CHAT & SETTINGS) -->
        <div class="chat-sidebar">
            <p class="sidebar-chat-name">Tom Simpson<a href="#" data-activates="chat-messages" class="chat-message-link"><i class="material-icons">keyboard_arrow_right</i></a></p>
            <div class="messages-container">
                <div class="message-wrapper them">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar1.png" class="circle" alt=""></div>
                    <div class="text-wrapper">Lorem Ipsum</div>
                </div>
                <div class="message-wrapper me">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar2.png" class="circle" alt=""></div>
                    <div class="text-wrapper">Integer in faucibus diam?</div>
                </div>
                <div class="message-wrapper them">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar1.png" class="circle" alt=""></div>
                    <div class="text-wrapper">Vivamus quis neque volutpat, hendrerit justo vitae, suscipit dui</div>
                </div>
                <div class="message-wrapper me">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar2.png" class="circle" alt=""></div>
                    <div class="text-wrapper">Suspendisse condimentum tortor et lorem pretium</div>
                </div>
                <div class="message-wrapper them">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar1.png" class="circle" alt=""></div>
                    <div class="text-wrapper">dolore eu fugiat nulla pariatur</div>
                </div>
                <div class="message-wrapper me">
                    <div class="circle-wrapper"><img src="../../assets/images/avatars/avatar2.png" class="circle" alt=""></div>
                    <div class="text-wrapper">Duis maximus leo eget massa porta</div>
                </div>
            </div>
            <div class="message-compose-box">
                <div class="input-field">
                    
                    <div class="form-group">
                        <label for="message_compose">Write message</label>
                        <input placeholder="Write message" id="message_compose" type="text">
                    </div>
                </div>
            </div>
        </div><!-- Chat Sidebar -->
        
        
    </div><!-- App Container -->
    
    <!-- Javascripts -->
    <script src="../../assets/plugins/jquery/jquery-3.4.1.min.js"></script>
    <script src="../../assets/plugins/bootstrap/popper.min.js"></script>
    <script src="../../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../assets/plugins/waves/waves.min.js"></script>
    <script src="../../assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../../assets/js/alpha.min.js"></script>
</body>

Code

All theme CSS files are located in theme/assets/css folder. For your CSS customization you can use theme/assets/css/custom.css. Keep your custom CSS separate it makes more easier when updating the theme in future.

All Javascript files are located in source/assets/js/ folder. Also Page-level Javascript files are located in theme/assets/js/pages/ folder and each page has its own Javascript file. For your Javascripts you can use theme/assets/js/custom.js. Keep your custom Javascript separate it makes more easier when updating the theme in future.

Fonts

Alpha uses Roboto font. It must be loaded in HTML Head before other CSS files.

Font code example:

<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">

Alpha also uses Material Design Icons.

Note! Fonts must be loaded in HTML Head before theme css files.

CSS Utilities

All available Helper Classes in Alpha:

	Prefix	Second Prefix (side)	third Prefix	Suffix (value)
Margin	m	t,r,b,l	n (only for negative values)	xxs, xs, sm, md, lg, xxl
Padding	p	v,h (top & bottom, left & right)		xxs, xs, sm, md, lg, xxl

.no-s Removes margins & paddings

.no-m Removes margins

.no-p Removes paddings

.no-p-h Removes paddings from left & right

.no-p-v Removes Paddings from top & bottom

.no-b Removes borders

.b Adds border from all sides

.b-t, .b-r, .b-b, .b-l Adds border from top, right, bottom, left

.b-default, .b-primary, .b-success, .b-info, .b-warning, .b-danger Adds border by contextual colors, see colors doc.

.b-2, .b-3, .b-4 Border size

.b-n-t, .b-n-r, .b-n-b, .b-n-l Removes border from top, right, bottom, left

.no-r Removes border radius

.r Adds border radius

.r-t-l, .r-t-r, .r-b-l, .r-b-r Adds border radius From top-left, top-right, bottom-left, bottom-right sides.

.no-r-t-l, .no-r-t-r, .no-r-b-l, .no-r-b-r Removes border radius From top-left, top-right, bottom-left, bottom-right sides.

New Page

It's very easy to create a new page with Alpha.

You can use all components that are shown in the live preview. Note, all content should be placed in .page-content to fit the page correctly.

If you will use component that needs some JS codes which are included in component demo page at the end of the HTML body tag, you can just include the same JS file. If you will use component that needs an extra plugin to work, you have to include files of this plugins as they are included in the preview page.

References

Plugin	Official Website
Apex Charts	https://apexcharts.com/
Bootstrap	http://getbootstrap.com/
Chartjs	http://www.chartjs.org/
jQuery elevateZoom	www.elevateweb.co.uk/image-zoom/
FontAwesome	http://fontawesome.io/
Image Cropper	http://fengyuanchen.github.io/cropper/
Ion-slider	http://ionden.com/a/plugins/ion.rangeSlider/
Jquery	https://jquery.com/
Plupload	https://www.plupload.com/
Slimscroll	http://rocha.la/jQuery-slimScroll/
Select2	https://select2.org/
Toastr	https://github.com/CodeSeven/toastr/
Codemirror	https://codemirror.net/
D3	https://d3js.org/
NVD3	http://nvd3.org/
Flot Charts	https://www.flotcharts.org/
IDLE Timer	https://github.com/thorst/jquery-idletimer
Sparkline	https://omnipotent.net/jquery.sparkline/#s-about
Masonry	https://masonry.desandro.com/
Nestable	https://dbushell.com/Nestable/
Waves	http://fian.my.id/Waves/

Support

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.