Material Pro Admin Template - The Most Complete & Trusted Bootstrap 4 Admin Template

1. Introduction

Material Pro Admin is a popular open source WebApp template for admin dashboards and control panels. Material Pro Admin is fully responsive HTML template, which is based on the CSS framework Bootstrap 4. It utilizes all of the Bootstrap components in its design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications. Monter Admin is based on a modular design, which allows it to be easily customized and built upon. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

We put a lot of love and effort to make Material Pro Admin a useful template for everyone and now It comes with 7 unique admin templates. We are keen to release continuous long term updates and lots of new features will be coming soon in the future releases. Once you purchased Material Pro Admin, you will be entitled to free download of all future updates for the same license.

Author: Wrappixel / Nirav Joshi
Contact: info@wrappixel.com / niravjoshi87@gmail.com
Follow: twitter.com/wrappixel
Like: facebook.com/wrappixel
website: https://wrappixel.com

NOTE: A single license can be used only for one domain or client. Each use of the template requires a separate license. We hope you will follow the rules as it will help us to continue supporting our template and providing a free future updates.

1.2 Installation Guide

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.

Note: we recomonded you to please make your one own css file & one js files and add that in your page, so whenever the update of Material Proadmin comes it does not affect your code.

2. Template Structure

All template files have fixed structure consisting of header, mega menu, top menu, user profile, sidebar menu, right sidebar, content and footer as shown below:

template

3. Beginning of Page

Below code is used at the beginning of all HTML pages to detect Internet Explorer browser version and set a spesific class applied to Internet Explorer versions.

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

<head>
    <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="../assets/images/favicon.png">
    <title>Material Pro Admin Template - Responsive web app kit dashboard</title>
    <!-- Bootstrap Core CSS -->
    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/plugins/prism/prism.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="../main/css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="../main/css/colors/blue.css" id="theme" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

4. Preloader (spinner)

This is for the loader when page load

                                        
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> 
        </svg>
    </div>
    <!-- ============================================================== -->
    <!-- Preloader end -->
    <!-- ============================================================== -->

5. Logo

This is for Brand identity means logo - we have separated logo icon and logo text both dark and light version you can upload

                                        
<!-- ============================================================== -->
<!-- Logo -->
<!-- ============================================================== -->
<div class="navbar-header">
    <a class="navbar-brand" href="index.html">
        <!-- Logo icon -->
        <b>
            <!--You can put here icon as well // <i class="wi wi-sunset"></i> //-->
            <!-- Dark Logo icon -->
            <img src="../assets/images/logo-icon.png" alt="homepage" class="dark-logo" />
            <!-- Light Logo icon -->
            <img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo" />
        </b>
        <!--End Logo icon -->
        <!-- Logo text --><span>
         <!-- dark Logo text -->
         <img src="../assets/images/logo-text.png" alt="homepage" class="dark-logo" />
         <!-- Light Logo text -->    
         <img src="../assets/images/logo-light-text.png" class="light-logo" alt="homepage" /></span> </a>
</div>
<!-- ============================================================== -->
<!-- End Logo -->
<!-- ============================================================== -->

6. Left Sidebar

We have created leftsidebar with the following code.

                                            
<!-- ============================================================== -->
<!-- Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->
<aside class="left-sidebar">
    <!-- Sidebar scroll-->
    <div class="scroll-sidebar">
        <!-- Sidebar navigation-->
        <nav class="sidebar-nav">
            <ul id="sidebarnav">
                <li class="nav-small-cap">DOCUMENTATION</li>
                <li><a href="#Intro" aria-expanded="false"><i class="mdi mdi-file"></i><span class="hide-menu">Introduction</span></a></li>
            </ul>
        </nav>
        <!-- End Sidebar navigation -->
    </div>
    <!-- End Sidebar scroll-->
    <!-- Bottom points-->
    <div class="sidebar-footer">
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
        <!-- item--><a href="" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a> </div>
    <!-- End Bottom points-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss  -->
<!-- ============================================================== -->

7. Page content, right sidebar and Footer

Below is the code for the page content wrapper, you can start your content here

                                        
        <!-- ============================================================== -->
        <!-- Page wrapper  -->
        <!-- ============================================================== -->
        <div class="page-wrapper">
            <!-- ============================================================== -->
            <!-- Container fluid  -->
            <!-- ============================================================== -->
            <div class="container-fluid">
                <!-- ============================================================== -->
                <!-- Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <div class="row page-titles">
                    <div class="col-md-6 col-8 align-self-center">
                        <h3 class="text-themecolor m-b-0 m-t-0">Dashboard</h3>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                            <li class="breadcrumb-item active">Dashboard</li>
                        </ol>
                    </div>
                    <div class="col-md-6 col-4 align-self-center">
                        <button class="right-side-toggle waves-effect waves-light btn-info btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
                        <button class="btn pull-right hidden-sm-down btn-success"><i class="mdi mdi-plus-circle"></i> Create</button>
                        <div class="dropdown pull-right m-r-10 hidden-sm-down">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                January 2017
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">February 2017</a>
                                <a class="dropdown-item" href="#">March 2017</a>
                                <a class="dropdown-item" href="#">April 2017</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Bread crumb and right sidebar toggle -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                This is some text within a card block.
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->
                <!-- ============================================================== -->
                <!-- Right sidebar -->
                <!-- ============================================================== -->
                <!-- .right-sidebar -->
                <div class="right-sidebar">
                    <div class="slimscrollright">
                        <div class="rpanel-title"> Service Panel <span><i class="ti-close right-side-toggle"></i></span> </div>
                        <div class="r-panel-body">
                            <ul id="themecolors" class="m-t-20">
                                <li><b>With Light sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default" class="default-theme">1</a></li>
                                <li><a href="javascript:void(0)" data-theme="green" class="green-theme">2</a></li>
                                <li><a href="javascript:void(0)" data-theme="red" class="red-theme">3</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue" class="blue-theme working">4</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple" class="purple-theme">5</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna" class="megna-theme">6</a></li>
                                <li class="d-block m-t-30"><b>With Dark sidebar</b></li>
                                <li><a href="javascript:void(0)" data-theme="default-dark" class="default-dark-theme">7</a></li>
                                <li><a href="javascript:void(0)" data-theme="green-dark" class="green-dark-theme">8</a></li>
                                <li><a href="javascript:void(0)" data-theme="red-dark" class="red-dark-theme">9</a></li>
                                <li><a href="javascript:void(0)" data-theme="blue-dark" class="blue-dark-theme">10</a></li>
                                <li><a href="javascript:void(0)" data-theme="purple-dark" class="purple-dark-theme">11</a></li>
                                <li><a href="javascript:void(0)" data-theme="megna-dark" class="megna-dark-theme ">12</a></li>
                            </ul>
                            <ul class="m-t-20 chatonline">
                                <li><b>Chat option</b></li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/1.jpg" alt="user-img" class="img-circle"> <span>Varun Dhavan <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/2.jpg" alt="user-img" class="img-circle"> <span>Genelia Deshmukh <small class="text-warning">Away</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/3.jpg" alt="user-img" class="img-circle"> <span>Ritesh Deshmukh <small class="text-danger">Busy</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/4.jpg" alt="user-img" class="img-circle"> <span>Arijit Sinh <small class="text-muted">Offline</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/5.jpg" alt="user-img" class="img-circle"> <span>Govinda Star <small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/6.jpg" alt="user-img" class="img-circle"> <span>John Abraham<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/7.jpg" alt="user-img" class="img-circle"> <span>Hritik Roshan<small class="text-success">online</small></span></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)"><img src="../assets/images/users/8.jpg" alt="user-img" class="img-circle"> <span>Pwandeep rajan <small class="text-success">online</small></span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- ============================================================== -->
                <!-- End Right sidebar -->
                <!-- ============================================================== -->
            </div>
            <!-- ============================================================== -->
            <!-- End Container fluid  -->
            <!-- ============================================================== -->
            <!-- ============================================================== -->
            <!-- footer -->
            <!-- ============================================================== -->
            <footer class="footer">
                © 2017 Material Pro Admin by wrappixel.com
            </footer>
            <!-- ============================================================== -->
            <!-- End footer -->
            <!-- ============================================================== -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page wrapper  -->
        <!-- ============================================================== -->

8. Settings in custom js

Below js code is used for theme setting , fix header , toggle sidebar and right sidebar open close.

// topbar stickey on scroll for fix header
    $(".fix-header .topbar").stick_in_parent({ });
    
// ============================================================== 
// Theme options for sidebar toggler and logo text show hide
// ==============================================================     
$(".sidebartoggler").on('click', function () {
    if ($("body").hasClass("mini-sidebar")) {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow", "hidden").parent().css("overflow", "visible");
        $("body").removeClass("mini-sidebar");
        $('.navbar-brand span').show();
        $(".sidebartoggler i").addClass("ti-menu");
    }
    else {
        $("body").trigger("resize");
        $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
        $("body").addClass("mini-sidebar");
        $('.navbar-brand span').hide();
        $(".sidebartoggler i").removeClass("ti-menu");
    }
});

// ============================================================== 
// This is for Right sidebar options
// ============================================================== 
$(".right-side-toggle").click(function () {
    $(".right-sidebar").slideDown(50);
    $(".right-sidebar").toggleClass("shw-rside");

});

9. Sidebar Navigation for window resize

Below js code is used for sidebar open close, changing view in all device code and toggle sidebar.


// ============================================================== 
// This is for the top header part and sidebar part
// ==============================================================  
var set = function () {
        var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width;
        var topOffset = 70;
        if (width < 1170) {
            $("body").addClass("mini-sidebar");
            $('.navbar-brand span').hide();
            $(".scroll-sidebar, .slimScrollDiv").css("overflow-x", "visible").parent().css("overflow", "visible");
            $(".sidebartoggler i").addClass("ti-menu");
        }
        else {
            $("body").removeClass("mini-sidebar");
            $('.navbar-brand span').show();
            $(".sidebartoggler i").removeClass("ti-menu");
        }

        var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $(".page-wrapper").css("min-height", (height) + "px");
        }

};
$(window).ready(set);
$(window).on("resize", set);
});

10. Font Family

We have used google fonts for the template you can change whatever font you wish

                                        
// Variables
@import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900';

$bodyfont:'Rubik', sans-serif;
$headingfont:'Rubik', sans-serif;

11. scss & css

Our Template is based on scss and we import all the file into style.css you can simply edit any scss and compile it

                                        
@import 'variable'; (All the predefine varialbes colors and etc)
@import 'app'; ( All the Common scss contain here )
@import 'pages'; (All pages scss contain here )
@import 'sidebar'; ( Left sidebar scss contain here )
@import '../scss/icons/font-awesome/css/font-awesome.min.css'; ( This is for the icons )
@import '../scss/icons/simple-line-icons/css/simple-line-icons.css';( This is for the icons )
@import '../scss/icons/weather-icons/css/weather-icons.min.css';( This is for the icons )
@import '../scss/icons/linea-icons/linea.css';( This is for the icons )
@import '../scss/icons/themify-icons/themify-icons.css'; ( This is for the icons )
@import '../scss/icons/flag-icon-css/flag-icon.min.css';( This is for the icons )
@import "../scss/icons/material-design-iconic-font/css/materialdesignicons.min.css";( This is for the icons )
@import 'widgets';( This is for the all widgets of the template )
@import 'grid'; ( This is for the extra grid of xlg )
@import 'responsive'; ( This is for the responsive scss )
@import '../css/spinners.css'; ( This is for the Loader )
@import '../css/animate.css';( This is for the Animation )

Note: we recomonded you to please make your one own css and one own js files and add that in your page, so whenever the update of Material Proadmin comes it does not affect your code.

12. Horizontal menu / Navigation

We have already Created Horizontal Demo for the template

Check the live Preview

12. Starter kit page ( Create new page )

You can start your project with starter-page.html , in that page all the unnecessary script and html code is removed, so you can start with the new page.

Check the live Preview

13. Helper Classes

we make classes to help you in your developement process, and make it fast. checkout the below link for the helper classes

Check the live Preview

14. Folder Structure

we follow simple structure for the template

                                        
                                            HTML
                                              ├── 
                                              │   └── Material Pro Admin HTML/
                                              │       └── Css
                                              │            └── All Css files
                                              │       └── Js
                                              │            └── All Js files
                                              │       └── scss
                                              │            └── All scss files
                                              │       └── All Html Pages
                                              │
                                              │   └── Assets/
                                              │       └── Plugins
                                              │            └── All Required plugins files
                                              │       └── Images
                                              │             └── All Theme Images
                                              └──

15. Color Variations

We have made Total 6 Color variation with light and dark sidebar

                                        
<!-- You can change the theme colors, just put this css to head --> 
<link href="css/colors/default.css" id="theme" rel="stylesheet"> 

<link href="css/colors/green.css" id="theme" rel="stylesheet"> 

<link href="css/colors/red.css" id="theme" rel="stylesheet"> 

<link href="css/colors/blue.css" id="theme" rel="stylesheet"> 

<link href="css/colors/purple.css" id="theme" rel="stylesheet"> 

<link href="css/colors/megna.css" id="theme" rel="stylesheet">

<!-- For the dark sidebar --> 
<link href="css/colors/default-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/green-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/red-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/blue-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/purple-dark.css" id="theme" rel="stylesheet"> 

<link href="css/colors/megna-dark.css" id="theme" rel="stylesheet">

16. Layout options

We have provided many layout options you can choose whatever you like

For Example

Fix header	Simply Put class `.fix-header` to body tag
Fix Sidebar	Simply Put class `.fix-sidebar` to body tag
Logo in Center	Simply Put class `.logo-center` to body tag

17. Content

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 behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

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

.col-md-1

.col-md-8

.col-md-4

.col-md-6

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.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Example: Mobile, tablet, desktops

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

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

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.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

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.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

18. Card

Below is the basic card structure.

                                 
<div class="card">
    <div class="card-header">
        Title
        <div class="card-actions">
            <a class="" data-action="collapse"><i class="ti-minus"></i></a>
            <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
            <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
        </div>
    </div>
    <div class="card-body collapse show">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    </div>
</div>

19. Icons

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

Icon Name	Example
Font-awesome	`<i class="fa fa-icon-name"></i>`
Material Icons	`<i class="mdi mdi-icon-name"></i>`
Linea Icons	`<div data-icon="a" class="linea-icon linea-basic"><div>`
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>`

20. Button

Below is the general 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>

21. Charts

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

Page	Where to find it's JS
`index.html` (dashboard1)	`js/dashboard1.js`
`index2.html` (dashboard2)	`js/dashboard2.js`
`index3.html` (dashboard3)	`js/dashboard3.js`
`index4.html` (dashboard4)	`js/dashboard4.js`
`index5.html` (dashboard5)	`js/dashboard5.js`
`index6.html` (dashboard6)	`js/dashboard6.js`

22. Form

Below is the basic 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 waves-effect waves-light m-r-10">Submit</button>
    <button type="submit" class="btn btn-inverse waves-effect waves-light">Cancel</button>
</form>

23. Table

Below is the basic table structure.

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

23.1 Other Table Plugins & Documentation

Datatables: Documentation
Js grid Table: Documentation
Responsive Table: Documentation
Bootstrap-table: Documentation
FooTable: Documentation

24. Js

We diffentiate scss file for the pages and widgets and compile it with style.css

Scss files

File	Description
`jquery.js`, `tether.js, bootstrap.js`, `jquery.slimscroll`	These files are used at main files of the theme. and nicescroll is for sidebarscroll
`custom.js`	This is a main function js file. it contain sidebar and other basic js
`sidebar.js`	This file contains sidebarnavigation js
`wave.js`	This is for wave effects on buttons and other elements

25. Plugins

Select Plugin

jQuery Block-UI

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/blockUI/jquery.blockUI.js" type="text/javascript"></script>

Bootstrap Datepicker

CSS Files

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

JavaScript Files

<script src="../assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js" type="text/javascript"></script>

bootstrap-daterangepicker

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-daterangepicker/daterangepicker.css" />

JavaScript Files

<script src="../assets/plugins/bootstrap-daterangepicker/daterangepicker.js" type="text/javascript"></script>

bootstrap-rtl-master

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-rtl-master/dist/css/bootstrap-rtl.min.css" />

JavaScript Files

<script src="../assets/plugins/bootstrap-rtl-master/dist/js/bootstrap-rtl.min.js" type="text/javascript"></script>

bootstrap-select

CSS Files

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

JavaScript Files

<script src="../assets/plugins/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>

bootstrap-social

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-social/bootstrap-social.css" />

JavaScript Files

No JS available

bootstrap-table

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.css" />

JavaScript Files

<script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-table/dist/bootstrap-table.ints.js" type="text/javascript"></script>

bootstrap-tagsinput

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" />

JavaScript Files

<script src="../assets/plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js" type="text/javascript"></script>

bootstrap-touchspin

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" />

JavaScript Files

<script src="../assets/plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>

bootstrap-treeview

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js" type="text/javascript"></script>
<script src="../assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview-init.js" type="text/javascript"></script>

Calendar

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/calendar/dist/fullcalendar.css" />

JavaScript Files

<script src="../assets/plugins/calendar/jquery-ui.min.js" type="text/javascript"></script>
<script src="../assets/plugins/calendar/dist/fullcalendar.min.js" type="text/javascript"></script>
<script src="../assets/plugins/calendar/dist/jquery.fullcalendar.js" type="text/javascript"></script>

Chart.js

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/Chart.js/chartjs.init.js" type="text/javascript"></script>
<script src="../assets/plugins/Chart.js/Chart.min.js" type="text/javascript"></script>

clockpicker

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.css" />

JavaScript Files

<script src="../assets/plugins/clockpicker/dist/jquery-clockpicker.min.js" type="text/javascript"></script>

counterup

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>

cropper

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/cropper/cropper.min.css" />

JavaScript Files

<script src="../assets/plugins/cropper/cropper.min.js" type="text/javascript"></script>
<script src="../assets/plugins/cropper/cropper-init.js" type="text/javascript"></script>

css-chart

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/css-chart/css-chart.css" />

JavaScript Files

No JS available

custom-select

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/custom-select/custom-select.css" />

JavaScript Files

<script src="../assets/plugins/custom-select/custom-select.min.js" type="text/javascript"></script>

dropify

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/dropify/dist/css/dropify.min.css" />

JavaScript Files

<script src="../assets/plugins/dropify/dist/js/dropify.min.js" type="text/javascript"></script>

dropzone master

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/dropzone-master/dist/dropzone.css" />

JavaScript Files

<script src="../assets/plugins/dropzone-master/dist/dropzone.js" type="text/javascript"></script>

fancybox

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/fancybox/ekko-lightbox.min.css" />

JavaScript Files

<script src="../assets/plugins/fancybox/ekko-lightbox.min.js" type="text/javascript"></script>

flot

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/flot/excanvas.min.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.resize.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.time.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.stack.js" type="text/javascript"></script>
<script src="../assets/plugins/flot/jquery.flot.crosshair.js" type="text/javascript"></script>

flot-tooltip

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/flot.tooltip/js/jquery.flot.tooltip.min.js" type="text/javascript"></script>

footable

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/footable/css/footable.core.css" />

JavaScript Files

<script src="../assets/plugins/footable/js/footable.all.min.js" type="text/javascript"></script>

gallery

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/gallery/css/animated-masonry-gallery.css" />

JavaScript Files

<script src="../assets/plugins/gallery/js/animated-masonry-gallery.js" type="text/javascript"></script>
<script src="../assets/plugins/gallery/js/jquery.isotope.min.js" type="text/javascript"></script>

gmaps

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/gmaps/gmaps.min.js" type="text/javascript"></script>
<script src="../assets/plugins/gmaps/jquery.gmaps.js" type="text/javascript"></script>

horizontal-timeline

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/horizontal-timeline/css/horizontal-timeline.css" />

JavaScript Files

<script src="../assets/plugins/horizontal-timeline/js/horizontal-timeline.js" type="text/javascript"></script>

html5-editor

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/html5-editor/bootstrap-wysihtml5.css" />

JavaScript Files

<script src="../assets/plugins/html5-editor/wysihtml5-0.3.0.js" type="text/javascript"></script>
<script src="../assets/plugins/html5-editor/bootstrap-wysihtml5.js" type="text/javascript"></script>

ion-rangeslider

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/ion-rangeslider/css/ion.rangeSlider.skinModern.css" />

JavaScript Files

<script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="../assets/plugins/ion-rangeslider/js/ion-rangeSlider/ion.rangeSlider-init.js" type="text/javascript"></script>

jquery-easy-pie-chart

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery.easy-pie-chart/easy-pie-chart.init.js" type="text/javascript"></script>

jquery-asColorPicker

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-asColorPicker-master/css/asColorPicker.css" />

JavaScript Files

<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColor.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asGradient.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-asColorPicker-master/libs/jquery-asColorPicker.min.js" type="text/javascript"></script>

jquery-sparkline

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/jquery-sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-sparkline/jquery.charts-sparkline.js" type="text/javascript"></script>

jquery-wizard-master

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/css/wizard.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.css" />

JavaScript Files

<script src="../assets/plugins/jquery-wizard-master/dist/jquery-wizard.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/formValidation.min.js" type="text/javascript"></script>
<script src="../assets/plugins/jquery-wizard-master/libs/formvalidation/bootstrap.min.js" type="text/javascript"></script>

jsgrid

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/jsgrid/dist/jsgrid-theme.min.css" />

JavaScript Files

<script src="../assets/plugins/jsgrid/db.js" type="text/javascript"></script>
<script src="../assets/plugins/jsgrid/dist/jsgrid.min.js" type="text/javascript"></script>
<script src="js/jsgrid-init.js" type="text/javascript"></script>

knob chart

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/knob/jquery.knob.js" type="text/javascript"></script>

magnific-popup

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/Magnific-Popup-master/dist/magnific-popup.css" />

JavaScript Files

<script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="../assets/plugins/Magnific-Popup-master/dist/jquery.magnific-popup-init.js" type="text/javascript"></script>

moment

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/moment/moment.js" type="text/javascript"></script>

morrisjs

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/morrisjs/morris.css" />

JavaScript Files

<script src="../assets/plugins/raphael/raphael-min.js" type="text/javascript"></script>
<script src="../assets/plugins/morrisjs/morris.js" type="text/javascript"></script>
<script src="js/morris-data.js" type="text/javascript"></script>

multiselect

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/multiselect/css/multi-select.css" />

JavaScript Files

<script src="../assets/plugins/multiselect/js/jquery.multi-select.js" type="text/javascript"></script>

nestable

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/nestable/nestable.css" />

JavaScript Files

<script src="../assets/plugins/nestable/jquery.nestable.js" type="text/javascript"></script>

owl-carousel

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/owl.carousel/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="../assets/plugins/owl.carousel/owl.theme.default.css" />

JavaScript Files

<script src="../assets/plugins/owl.carousel/owl.carousel.min.js" type="text/javascript"></script>
<script src="../assets/plugins/owl.carousel/owl.custom.js" type="text/javascript"></script>

peity charts

CSS Files

No CSS Available

JavaScript Files

<script src="../assets/plugins/peity/jquery.peity.min.js" type="text/javascript"></script>
<script src="../assets/plugins/peity/jquery.peity.init.js" type="text/javascript"></script>

sidebar-nav

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/sidebar-nav/dist/sidebar-nav.min.css" />

JavaScript Files

<script src="../assets/plugins/sidebar-nav/dist/sidebar-nav.min.js" type="text/javascript"></script>

skycons

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/skycons/skycons.js" type="text/javascript"></script>

summernote

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/summernote/dist/summernote.css" />

JavaScript Files

<script src="../assets/plugins/summernote/dist/summernote.min.js" type="text/javascript"></script>

sweetalert

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/sweetalert/sweetalert.css" />

JavaScript Files

<script src="../assets/plugins/sweetalert/sweetalert.min.js" type="text/javascript"></script>
<script src="../assets/plugins/sweetalert/jquery.sweet-alert.custom.js" type="text/javascript"></script>

switchery

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/switchery/dist/switchery.min.css" />

JavaScript Files

<script src="../assets/plugins/switchery/dist/switchery.min.js" type="text/javascript"></script>

tablesaw

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/tablesaw-master/dist/tablesaw.css" />

JavaScript Files

<script src="../assets/plugins/tablesaw-master/dist/tablesaw.js" type="text/javascript"></script>
<script src="../assets/plugins/tablesaw-master/dist/tablesaw-init.js" type="text/javascript"></script>

timepicker

CSS Files

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

JavaScript Files

<script src="../assets/plugins/timepicker/bootstrap-timepicker.min.js" type="text/javascript"></script>

tiny-editable

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/tiny-editable/mindmup-editabletable.js" type="text/javascript"></script>
<script src="../assets/plugins/tiny-editable/numeric-input-example.js" type="text/javascript"></script>

tinymce

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/tinymce/tinymce.min.js" type="text/javascript"></script>

toast

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/toast-master/css/jquery.toast.css" />

JavaScript Files

<script src="../assets/plugins/toast-master/js/jquery.toast.js" type="text/javascript"></script>
<script src="js/toastr.js" type="text/javascript"></script>

typeahead

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/typeahead.js-master/dist/typehead-min.css" />

JavaScript Files

<script src="../assets/plugins/typeahead.js-master/dist/typeahead.bundle.min.js" type="text/javascript"></script>
<script src="../assets/plugins/typeahead.js-master/dist/typeahead-init.js" type="text/javascript"></script>

vectormap

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" />

JavaScript Files

<script src="../assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-in-mill.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-us-aea-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-uk-mill-en.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jquery-jvectormap-au-mill.js" type="text/javascript"></script>
<script src="../assets/plugins/vectormap/jvectormap.custom.js" type="text/javascript"></script>

waypoints

CSS Files

No CSS available

JavaScript Files

<script src="../assets/plugins/waypoints/lib/jquery.waypoints.js" type="text/javascript"></script>

x-editable

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css" />

JavaScript Files

<script src="../assets/plugins/x-editable/dist/bootstrap3-editable/js/bootstrap-editable.min.js" type="text/javascript"></script>

datatables

CSS Files

<link rel="stylesheet" type="text/css" href="../assets/plugins/datatables/jquery.dataTables.min.css" />

JavaScript Files

<script src="../assets/plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>

26. Credits to the third party plugins

27. Free support

If you have any type of query or support needed, feel free to contact us by mail or message to info@wrappixel.com or niravjoshi87@gmail.com

28. Free PSD File

Mail us on info@wrappixel.com for get the psd file. we will send you all the psd for free.

29. How to Install Angular CLI app

Note:

To update angular-cli, Read: How to update Angular CLI

If you have any type of query or support needed, feel free to contact us by mail or message to info@wrappixel.com

Node.js: https://nodejs.org/en/
npm: https://npmjs.com

Installing Node.js

If you’re using OS X or Windows, the best way to install Node.js is to use one of the installers from the Node.js download page. If you’re using Linux, you can use the installer, or you can check NodeSource’s binary distributions to see whether or not there’s a more recent version that works with your system.

Test:

$ node -v

The version should be higher than v0.10.32.

Updating npm

Node comes with npm installed so you should have a version of npm. However, npm gets updated more frequently than Node does, so you’ll want to make sure it’s the latest version.

$ npm install npm@latest -g

Test:

$ npm -v

The version should be higher than 2.1.8.

Run project

Go to project directory

$ cd material-angularcli

Installing Angular CLI and project dependencies

Go to project directory through cmd or terminal and run below command

$ npm install

Start local server

$ ng serve

Your project is ready. Go to following url http://localhost:4200.

Folder Structure

                                        
                                            material-angularcli demo
                                              ├── 
                                              │   └── Assets/
                                              │       └── Css
                                              │            └── All Css files
                                              │       └── Js
                                              │            └── All Js files
                                              │       └── scss
                                              │            └── All scss files
                                              │       └── plugins
                                              |             └── All plugins
                                              │       └── Images
                                              |             └── All images
                                              │
                                              │   └── App/
                                              │       └── Shared
                                              │            └── Sidebar, breadcrumb, header and footer files
                                              │       └── Pages
                                              │            └── Starter, components and blank pages
                                              │       └── Pages / Component
                                              │            └── All Angular component pages
                                              └──

Thank you

1. Introduction

1.2 Installation Guide

2. Template Structure

3. Beginning of Page

4. Preloader (spinner)

5. Logo

6. Left Sidebar

7. Page content, right sidebar and Footer

8. Settings in custom js

9. Sidebar Navigation for window resize

10. Font Family

11. scss & css

12. Horizontal menu / Navigation

12. Starter kit page ( Create new page )

13. Helper Classes

14. Folder Structure

15. Color Variations

16. Layout options

17. Content

Grid options

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

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.

18. Card

19. Icons

20. Button

21. Charts

22. Form

23. Table

23.1 Other Table Plugins & Documentation

24. Js

25. Plugins

Select Plugin

jQuery Block-UI

CSS Files

JavaScript Files

Bootstrap Datepicker

CSS Files

JavaScript Files

bootstrap-daterangepicker

CSS Files

JavaScript Files

bootstrap-rtl-master

CSS Files

JavaScript Files

bootstrap-select

CSS Files

JavaScript Files

bootstrap-social

CSS Files

JavaScript Files

bootstrap-table

CSS Files

JavaScript Files

bootstrap-tagsinput

CSS Files

JavaScript Files

bootstrap-touchspin

CSS Files

JavaScript Files

bootstrap-treeview

CSS Files

JavaScript Files

Calendar

CSS Files

JavaScript Files

Chart.js

CSS Files

JavaScript Files

clockpicker

CSS Files

JavaScript Files

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

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.

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

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.

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.