Bre Admin

Introduction #

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. 

Requirements #

You will need the following sofwares to customize this template.

  1. Code Editing Software (eg: Dreamweaver, Sublime Text or Notepad++)
  2. Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
  3. FTP Tool to upload files to Server (eg: FileZilla)

Installation #

This is the simple static HTML template so no need any headech to install it.

Just simple steps to follow:

main (demo folder) +  assets (folder) = Enjoy your demo.

Page Structure #

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
<title>Ule - Bootstrap Dashboard Template</title>
<!-- Custom CSS -->
 
<link href="css/style.css" rel="stylesheet">

Left Sidebar #

 <!-- sidebar -->
<div class="nk-sidebar">
    <div class="nk-nav-scroll">
 
        <div class="nav-user">
            <img src="../assets/images/users/1.jpg" alt="" class="rounded-circle">
            <h5>John Doe</h5>
            <p>UI Developer</p>
 
            <div class="nav-user-option">
                <div class="setting-option">
                    <div data-toggle="dropdown">
                        <i class="icon-settings"></i>
                    </div>
                    <div class="dropdown-menu animated flipInX">
                        <a class="dropdown-item" href="#">Account</a>
                        <a class="dropdown-item" href="#">Lock</a>
                        <a class="dropdown-item" href="#">Logout</a>
                    </div>
                </div>
                <div class="notification-option">
                    <div data-toggle="dropdown">
                        <i class="icon-bell"></i>
                    </div>
                    <div class="dropdown-menu animated flipInX">
                        <a class="dropdown-item" href="#">Email
                            <span class="badge badge-primary pull-right m-t-3">05</span>
                        </a>
                        <a class="dropdown-item" href="#">Feed back
                            <span class="badge badge-danger pull-right m-t-3">02</span>
                        </a>
                        <a class="dropdown-item" href="#">Report
                            <span class="badge badge-warning pull-right m-t-3">02</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
 
        <ul class="metismenu" id="menu">
 
            <li class="nav-label">Main</li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-speedometer"></i>
                    <span class="nav-text">Dashboard</span>
                    <span class="badge badge-danger nav-badge">10</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="index.html">Dashnoard 1</a>
                    </li>
                    <li>
                        <a href="index2.html">Dashnoard 2</a>
                    </li>
                    <li>
                        <a href="index3.html">Dashnoard 3</a>
                    </li>
                    <li>
                        <a href="index4.html">Dashnoard 4</a>
                    </li>
                    <li>
                        <a href="index5.html">Dashnoard 5</a>
                    </li>
                    <li>
                        <a href="index6.html">Dashnoard 6</a>
                    </li>
                    <li>
                        <a href="index7.html">Dashnoard 7</a>
                    </li>
                    <li>
                        <a href="index8.html">Dashnoard 8</a>
                    </li>
                    <li>
                        <a href="index9.html">Dashnoard 9</a>
                    </li>
                    <li>
                        <a href="index10.html">Dashnoard 10</a>
                    </li>
                </ul>
            </li>
 
            <li class="nav-label">Crypto</li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-cursor"></i>
                    <span class="nav-text">Cryptocurrency</span>
                    <span class="badge badge-primary nav-badge">18</span>
 
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="ico-countdown.html">Countdown</a>
                    </li>
                    <li>
                        <a href="ico-market-cap.html">Market Capitalization</a>
                    </li>
                    <li>
                        <a href="ico-transaction.html">Transaction</a>
                    </li>
                    <li>
                        <a href="ico-pool-share.html">Pool Share</a>
                    </li>
                    <li>
                        <a href="ico-gainers-loosers.html">Gainers / Loosers</a>
                    </li>
                    <li>
                        <a href="ico-timeline.html">Timeline</a>
                    </li>
                    <li>
                        <a href="ico-progressbar.html">Progressbar</a>
                    </li>
                    <li>
                        <a href="ico-card.html">ICO Card</a>
                    </li>
                    <li>
                        <a href="ico-exchange.html">Exchange</a>
                    </li>
                    <li>
                        <a href="ico-advisor.html">Advisor</a>
                    </li>
                    <li>
                        <a href="ico-advisor-profile.html">Advisor Profile</a>
                    </li>
                    <li>
                        <a href="ico-tickers.html">Tickers</a>
                    </li>
                    <li>
                        <a href="ico-counter.html">Counters</a>
                    </li>
                    <li>
                        <a href="ico-trading-view.html">Trading View</a>
                    </li>
                    <li>
                        <a href="ico-distribution-admin.html">Distribution Admin</a>
                    </li>
                    <li>
                        <a href="ico-distribution-user.html">Distribution User</a>
                    </li>
                    <li>
                        <a href="ico-payment-gateway.html">Payment Gateway</a>
                    </li>
                    <li>
                        <a href="ico-wallet.html">Wallet</a>
                    </li>
                </ul>
            </li>
 
            <li class="nav-label">Layout</li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-layers"></i>
                    <span class="nav-text">Layouts</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="layout-blank.html">Blank</a>
                    </li>
                    <li>
                        <a href="layout-boxed.html">Boxed</a>
                    </li>
                    <li>
                        <a href="layout-fixed-header.html">Fixed Header</a>
                    </li>
                    <li>
                        <a href="layout-fixed-sidebar.html">Fixed Sidebar</a>
                    </li>
                    <li>
                        <a href="layout-starter-kit.html">Starter Kit</a>
                    </li>
                </ul>
            </li>
 
            <li class="nav-label">APPS & CHARTS</li>
            <li>
                <a href="app-profile.html">
                    <i class="icon-user"></i>
                    <span class="nav-text">Profile</span>
                </a>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-graph"></i>
                    <span class="nav-text">Charts</span>
                    <span class="badge badge-warning nav-badge">14</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="chart-amchart.html">AmChart</a>
                    </li>
                    <li>
                        <a href="chart-c3.html">C3 Chart</a>
                    </li>
                    <li>
                        <a href="chart-flot.html">Flot</a>
                    </li>
                    <li>
                        <a href="chart-morris.html">Morris</a>
                    </li>
                    <li>
                        <a href="chart-chartjs.html">Chartjs</a>
                    </li>
                    <li>
                        <a href="chart-chartjs-candlestick.html">Candlestick</a>
                    </li>
                    <li>
                        <a href="chart-chartjs-data-labels.html"> Datalabels</a>
                    </li>
                    <li>
                        <a href="chart-chartjs-stream.html">Live Stream</a>
                    </li>
                    <li>
                        <a href="chart-chartist.html">Chartist </a>
                    </li>
                    <li>
                        <a href="chart-sparkline.html">Sparkline </a>
                    </li>
                    <li>
                        <a href="chart-echart.html">Echart </a>
                    </li>
                    <li>
                        <a href="chart-google.html">Google </a>
                    </li>
                    <li>
                        <a href="chart-highchart.html">Highchart </a>
                    </li>
                    <li>
                        <a href="chart-rickshaw.html">Rickshaw </a>
                    </li>
                    <li>
                        <a href="chart-justgage.html">Justgage </a>
                    </li>
                    <li>
                        <a href="chart-knob.html">Knob </a>
                    </li>
                    <li>
                        <a href="chart-peity.html">Peity</a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-envelope"></i>
                    <span class="nav-text">Email</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="email-inbox.html">Inbox</a>
                    </li>
                    <li>
                        <a href="email-read.html">Read</a>
                    </li>
                    <li>
                        <a href="email-compose.html">Compose</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-calender"></i>
                    <span class="nav-text">Calendar</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="calender-event.html">Event</a>
                    </li>
                    <li>
                        <a href="calender-date.html">Date</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-layers"></i>
                    <span class="nav-text">Basic Widget</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="widget-basic-card.html">Card</a>
                    </li>
                    <li>
                        <a href="widget-basic-social.html">Social</a>
                    </li>
                    <li>
                        <a href="widget-basic-statistics.html">Statistics</a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-pie-chart"></i>
                    <span class="nav-text"> Advanced Widget</span>
                    <span class="badge badge-danger nav-badge">9</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="widget-advanced-chartjs.html">Chartjs</a>
                    </li>
                    <li>
                        <a href="widget-advanced-morris.html">Morris</a>
                    </li>
                    <li>
                        <a href="widget-advanced-peity.html">Peity</a>
                    </li>
                    <li>
                        <a href="widget-advanced-sparkline.html">Sparkline</a>
                    </li>
                    <li>
                        <a href="widget-advanced-table.html">Table</a>
                    </li>
                    <li>
                        <a href="widget-advanced-map.html">Map</a>
                    </li>
                    <li>
                        <a href="widget-advanced-media.html">Media Object</a>
                    </li>
                    <li>
                        <a href="widget-advanced-weather.html">Weather</a>
                    </li>
                    <li>
                        <a href="widget-advanced-timeline.html">Timeline</a>
                    </li>
                    <li>
                        <a href="widget-advanced-todo.html">To Do</a>
                    </li>
                    <li>
                        <a href="widget-advanced-extra.html">Extra</a>
                    </li>
                </ul>
            </li>
 
            <li class="nav-label"> UI & Plugin</li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-puzzle"></i>
                    <span class="nav-text">Components</span>
                    <span class="badge badge-danger nav-badge">9</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="uc-nestedable.html">Nestedable</a>
                    </li>
                    <li>
                        <a href="uc-sweetalert.html"> Sweetalert</a>
                    </li>
                    <li>
                        <a href="uc-toastr.html">Toastr</a>
                    </li>
                    <li>
                        <a href="uc-bar-rating.html">Bar Rating</a>
                    </li>
                    <li>
                        <a href="uc-jrating.html">jRate</a>
                    </li>
                    <li>
                        <a href="uc-popup.html">Popup</a>
                    </li>
                    <li>
                        <a href="uc-range-slider.html">Range Slider</a>
                    </li>
                    <li>
                        <a href="uc-scrollable.html">Scrollable</a>
                    </li>
                    <li>
                        <a href="uc-weather.html">Weather</a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-diamond"></i>
                    <span class="nav-text">UI Features</span>
                    <span class="badge badge-success nav-badge">16</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="ui-accordion.html">Accordion</a>
                    </li>
                    <li>
                        <a href="ui-alert.html">Alert</a>
                    </li>
                    <li>
                        <a href="ui-badge.html">Badge</a>
                    </li>
                    <li>
                        <a href="ui-button.html">Button</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-carousel.html">Carousel</a>
                    </li>
                    <li>
                        <a href="ui-dropdown.html">Dropdown</a>
                    </li>
                    <li>
                        <a href="ui-list-group.html">List Group</a>
                    </li>
                    <li>
                        <a href="ui-media-object.html">Media Object</a>
                    </li>
                    <li>
                        <a href="ui-modal.html">Modal</a>
                    </li>
                    <li>
                        <a href="ui-pagination.html">Pagination</a>
                    </li>
                    <li>
                        <a href="ui-popover.html">Popover</a>
                    </li>
                    <li>
                        <a href="ui-progressbar.html">Progressbar</a>
                    </li>
                    <li>
                        <a href="ui-tab.html">Tab</a>
                    </li>
                    <li>
                        <a href="ui-typography.html">Typography</a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-bulb"></i>
                    <span class="nav-text">Form Stuff</span>
                    <span class="badge badge-primary nav-badge">14</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="form-basic.html">Basic Forms</a>
                    </li>
                    <li>
                        <a href="form-layout.html">Form Layout</a>
                    </li>
                    <li>
                        <a href="form-addons.html">Form Addons</a>
                    </li>
                    <li>
                        <a href="form-checkbox.html">Form Checkbox</a>
                    </li>
                    <li>
                        <a href="form-validation.html">Form Validation</a>
                    </li>
                    <li>
                        <a href="form-editor.html">Form Editor</a>
                    </li>
                    <li>
                        <a href="form-icheck.html">Form iCheck</a>
                    </li>
                    <li>
                        <a href="form-pickers.html">Form Pickers</a>
                    </li>
                    <li>
                        <a href="form-radio-button.html">Form Radio Button</a>
                    </li>
                    <li>
                        <a href="form-summernote.html">Form Summernote</a>
                    </li>
                    <li>
                        <a href="form-switch.html">Form Switch</a>
                    </li>
                    <li>
                        <a href="form-typehead.html">Form Typehead</a>
                    </li>
                    <li>
                        <a href="form-xeditable.html">Form Xeditable</a>
                    </li>
                    <li>
                        <a href="form-dropzone.html">Form Dropzone</a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-notebook"></i>
                    <span class="nav-text">BS Table</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="table-basic.html">
                            Basic </a>
                    </li>
                    <li>
                        <a href="table-layout.html">
                            Table Layout </a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-heart"></i>
                    <span class="nav-text">Datatable</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="table-dt-basic.html">
                            Datatable Basic </a>
                    </li>
                    <li>
                        <a href="table-dt-basic-button.html">
                            Datatable Basic Button </a>
                    </li>
                    <li>
                        <a href="table-dt-data-source.html">
                            Datatable Data Source </a>
                    </li>
                    <li>
                        <a href="table-dt-styling.html">
                            Datatable Style </a>
                    </li>
                </ul>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-plus"></i>
                    <span class="nav-text">Datatable Extension</span>
                    <span class="badge badge-warning nav-badge">10</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="table-dt-extension-autofill.html">
                            Autofill </a>
                    </li>
                    <li class="">
                        <a href="table-dt-extension-button-api.html">
                            Button API </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-button-basic.html">
                            Button Basic </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-button-column-visibility.html">
                            Button Column Visibility </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-button-flash-data-export.html">
                            Flash Data Export </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-button-html5-data-export.html">
                            HTML5 Data Export </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-button-print.html">
                            Button Print </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-column-reorder.html">
                            Column Render </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-fixed-column.html">
                            Fixed Column </a>
                    </li>
                    <li>
                        <a href="table-dt-extension-key-table.html">
                            Key Table </a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a href="table-jsgrid.html">
                    <i class="icon-trophy"></i>
                    <span class="nav-text">Jsgrid</span>
                </a>
            </li>
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-map"></i>
                    <span class="nav-text">Map</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="map-google.html">Google Map </a>
                    </li>
                    <li>
                        <a href="map-datamap.html">Data Map </a>
                    </li>
                    <li>
                        <a href="map-vectormap.html">Vector Map</a>
                    </li>
                </ul>
            </li>
 
            <li class="nav-label">Extra</li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-layers"></i>
                    <span class="nav-text">Pages</span>
                    <span class="badge badge-danger nav-badge">11</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="page-error-400.html">400</a>
                    </li>
                    <li>
                        <a href="page-error-403.html">403</a>
                    </li>
                    <li>
                        <a href="page-error-404.html">404</a>
                    </li>
                    <li>
                        <a href="page-error-500.html">500</a>
                    </li>
                    <li>
                        <a href="page-error-503.html">503</a>
                    </li>
                    <li>
                        <a href="page-helper.html">Helper</a>
                    </li>
                    <li>
                        <a href="page-pricing.html">Pricing</a>
                    </li>
                    <li>
                        <a href="page-login.html">Sign in</a>
                    </li>
                    <li>
                        <a href="page-register.html">Sign Up</a>
                    </li>
                    <li>
                        <a href="page-lock-screen.html">Lock Screen</a>
                    </li>
                    <li>
                        <a href="page-one-column.html">One Column</a>
                    </li>
                </ul>
            </li>
 
            <li>
                <a href="page-invoice.html">
                    <i class="icon-note"></i>
                    <span class="nav-text">Invoice Summary</span>
                </a>
            </li>
 
            <li>
                <a class="has-arrow" href="#" aria-expanded="false">
                    <i class="icon-arrow-down-circle"></i>
                    <span class="nav-text">Multi Level</span>
                </a>
                <ul aria-expanded="false">
                    <li>
                        <a href="#">item 1.1</a>
                    </li>
                    <li>
                        <a href="#">item 1.2</a>
                    </li>
                    <li>
                        <a class="has-arrow" href="#" aria-expanded="false">Menu 1.3</a>
                        <ul aria-expanded="false">
                            <li>
                                <a href="#">item 1.3.1</a>
                            </li>
                            <li>
                                <a href="#">item 1.3.2</a>
                            </li>
                            <li>
                                <a href="#">item 1.3.3</a>
                            </li>
                            <li>
                                <a href="#">item 1.3.4</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Last Nav</a>
                    </li>
                </ul>
            </li>
 
            <li class="">
                <a href="documentation.html">
                    <i class="icon-book-open"></i>
                    <span class="nav-text">Documentation</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- #/ nk nav scroll -->
</div>
<!-- #/ sidebar -->

Page Content #

<!-- content body -->
<div class="content-body">
    <div class="container-fluid">
        <div class="row page-titles">
            <div class="col-md-3 col-sm-4 col-lg-3 col-xl-2 p-r-0 align-self-center">
                <h3 class="text-primary">Dashboard</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="javascript:void(0)">Layout</a>
                    </li>
                    <li class="breadcrumb-item active">Blank</li>
                </ol>
            </div>
        </div>
    </div>
    <!-- #/ container -->
</div>
<!-- #/ content body -->

Custom JS #

//////////////////////////////
//  Header Fixed
//////////////////////////////
 
$(".header-fix .header")
    .stick_in_parent({}),
    $(".toggle-nav")
    .click(function () {
        $("body")
            .toggleClass("sidebar-show"), $(".toggle-nav i")
            .toggleClass("mdi mdi-menu"),
            $(".toggle-nav i")
            .addClass("mdi mdi-close");
    });
 
 
 
 
//////////////////////////////
//  Active Nav
//////////////////////////////
 
 
$(function () {
    for (var k = window.location, o = $("ul#sidebar-menu a")
            .filter(function () {
                return this.href == k;
            })
            .addClass("active")
            .parent()
            .addClass("active");;) {
        if (!o.is("li")) break;
        o = o.parent()
            .addClass("in")
            .parent()
            .addClass("active");
    }
});
 
 
//////////////////////////////
//  Search Box
//////////////////////////////
 
$(".search-box a, .search-box .app-search .srh-btn")
    .on("click", function () {
        $(".app-search")
            .slideToggle(200);
    });
 
 
//////////////////////////////
//  Mini Sidebar
//////////////////////////////
 
var k = function () {
    (window.innerWidth > 0 ? window.innerWidth : this.screen.width) < 1170 ? ($("body")
        .addClass("sidebar-mini"),
        $(".navbar-brand span")
        .hide(), $(".scroll-sidebar, .slimScroll")
        .css("overflow-x", "visible")
        .parent()
        .css("overflow", "visible"),
        $(".sidebartoggle i")
        .addClass("ti-menu")) : ($("body")
        .removeClass("sidebar-mini"),
        $(".navbar-brand span")
        .show());
    var k = (window.innerHeight > 0 ? window.innerHeight : this.screen.height) - 1;
    (k -= 70) < 1 && (k = 1), k > 70 && $(".page-wrapper")
        .css("min-height", k + "px");
};

Font Family #

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700,800');
@import url(../icons/font-awesome/css/font-awesome.min.css);
@import url(../icons/simple-line-icons/css/simple-line-icons.css);
@import url(../icons/weather-icons/css/weather-icons.min.css);
@import url(../icons/linea-icons/linea.css);
@import url(../icons/cryptocoins/css/cryptocoins.css);
@import url(../icons/cryptocoins/css/cryptocoins-colors.css);
@import url(../icons/themify-icons/themify-icons.css);
@import url(../icons/flag-icon-css/flag-icon.min.css);
@import url(../icons/material-design-iconic-font/css/materialdesignicons.min.css);

Layout options #

We have provided many layout options you can choose whatever you likeFor Example

Fix headerSimply Put class .fix-header to body tag
Fix SidebarSimply Put class .fix-sidebar to body tag
Boxed LayoutSimply Put class .boxed to body tag

Grid Options #

See how aspects of the Bootstrap grid system work across multiple devices with a handy table. check the official website grid page.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal #

Using a single set of .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

Example: Mobile and desktop #

Don’t want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Example: Mobile, tablet, desktops #

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

Responsive column resets #

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

Offsetting columns #

Move columns to the right using .offset-md–* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

Card #

<div class="card">
    <div class="card-body">
        <h4 class="card-title">BTC vs LTC vs NEO vs DASH vs ETH vs XRP</h4>
        <div id="morris-area-chart6"></div>
    </div>
</div>

Icons #

Below is the table of icon fonts used in this template.

Icon NameExample
Font-awesome<i class="fa fa-icon-name"></i>
Material Icons<i class="mdi mdi-icon-name"></i>
Simple Line Icons<i class="icon-name_of_icon"></i>
Themify Icons<i class="ti-icon-name"></i>
Weather Icons<i class="wi wi-icon-name"></i>
Flag Icons<i class="flag-icon flsg-icon-country-name"></i>
Crypto Icons<i class="cc NEO"></i>

Buttons #

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
</div>

Charts #

Below is the table of pages which includes charts and where you can find the script related to it.

PageWhere to find it’s JS
index.html (dashboard1)dist/js/pages/dashboard1.js
index2.html (dashboard2)dist/js/pages/dashboard2.js

Forms #

Form Structure

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">User Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter Username">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm Password">
    </div>
    <div class="form-group">
        <div class="checkbox checkbox-success">
            <input id="checkbox1" type="checkbox">
            <label for="checkbox1"> Remember me </label>
        </div>
    </div>
    <button type="submit" class="btn btn-success m-r-10">Submit</button>
    <button type="submit" class="btn btn-inverse ">Cancel</button>
</form>

Tables #

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Deshmukh</td>
            <td>Prohaska</td>
            <td>@Genelia</td>
            <td><span class="label label-danger">admin</span> </td>
        </tr>
        <tr>
            <td>2</td>
            <td>Deshmukh</td>
            <td>Gaylord</td>
            <td>@Ritesh</td>
            <td><span class="label label-info">member</span> </td>
        </tr>
        <tr>
            <td>3</td>
            <td>Sanghani</td>
            <td>Gusikowski</td>
            <td>@Govinda</td>
            <td><span class="label label-warning">developer</span> </td>
        </tr>
        <tr>
            <td>4</td>
            <td>Roshan</td>
            <td>Rogahn</td>
            <td>@Hritik</td>
            <td><span class="label label-success">supporter</span> </td>
        </tr>
        <tr>
            <td>5</td>
            <td>Joshi</td>
            <td>Hickle</td>
            <td>@Maruti</td>
            <td><span class="label label-info">member</span> </td>
        </tr>
        <tr>
            <td>6</td>
            <td>Nigam</td>
            <td>Eichmann</td>
            <td>@Sonu</td>
            <td><span class="label label-success">supporter</span> </td>
        </tr>
    </tbody>
</table>

JS Files #

FileDescription
custom.js, custom.min.jsThis is a main function js file. it contain sidebar and other basic js
sidebarmenu.jsThis file contains sidebarnavigation js

Credits #