Documentation

A how-to guide and helpful informations about configuration and options in theme.

INTRODUCTION

Thank you for purchasing Wunder, a template for admin dashboards and control panels. It is a responsive HTML template that is based on the CSS framework Bootstrap 4. If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Wunder and provide a consistent look throughout the template.

This template is created based on Material design, a very popular design language developed by Google recently. It is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. This documentation will provide information on how the template is structured and configuration of various components that are bundled with the template.

Before you start working with the template, we suggest you to go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Built with SaSS. This theme uses the Sass compiler to make it easier to customize and use. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or problems with this theme please use Envato Marketplace contact form on our profile or email us at support@urbanui.com

GETTING STARTED

You can directly use the compiled and ready to use version of the template. But in case you plan to customize the template extensively the template allows you to do so! This section will get you initiated on this.

File Hierarchy

The downloaded package will have the following structure. If you don't want to customize the template you can use the files as is after removing the 'sass' folder in 'assets'. Just unzip the files you just bought, go the pages folder, open the index.html file in a web browser and you are ready to go.

In case you wish to customize the styles you may do it by modifying .scss files provided in the 'sass' folder. More details on this is provided in the next section.


Wunder/
├── assets/
│   ├── css/
│   ├── js/
│   ├── img/
│   ├── sass/
│   └── vendors/
│
└── pages/
    └─── Wunder HTML pages

Modifying Sass Files

In case you plan to customize the template extensively, you can make changes to .scss files. We use the grunt task manager for the build processes. Grunt will watch for changes to .scss files and automatically compile the files to CSS. For this you need to install Node.JS and Grunt. Use of these tools is completely optional and only required if you want to modify the .scss files.

Dependencies

To get started you will need to install the following items

  • Ruby - to get Sass
  • NodeJs - to get npm (For managing our dependences)
  • Grunt - for task management.
Ruby and Sass

You can use several tools to install Ruby. Follow instructions here for installing Ruby.

If you are using windows you will have to install Ruby, the Ruby Installer is pretty painless, be sure to check the “Add Ruby executable to your PATH” option.

To install Sass on your computer, simply follow the instructions on the sass-lang.com website.

Node.js and NPM

You can download Node.js from here. Npm comes bundled with Node.js

Grunt

Getting started with grunt is pretty simple. The Grunt site is a great place to get information on installing Grunt if you need more information.

You need to first install Grunt using the below command

npm install -g grunt-cli

This installs the Grunt commandline interface globally to your machine so that you can access it.

Then, use the following commands to install grunt-contrib-sass that actually compiles your scss files to css and grunt-contrib-watch that watches our folder for changes in any files and run other tasks, say compile our Sass files.

npm install grunt-contrib-sass
npm install grunt-contrib-watch

The other thing that grunt requires, which, is really what does all the work, is the Gruntfile.js. In this file you set up all of your tasks that you will run.

Don't worry. We have this file already created for you.

Compile

Before you start modifying .scss files, make sure that you go to the root folder of the template and run the grunt command

This will start the file watch by grunt and whenever a file is modified .scss files will be compiled to create the css file

TEMPLATE STRUCTURE

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu and page content.

The basic HTML structure is as shown below. You can add different components to suit your needs. You will find a blank page template in the pages folder. You can modify header, top menu and side bar menu of this page and start using it as the basic page template for your project.

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

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png" />
  <link rel="icon" type="image/png" href="../../assets/img/favicon.png" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>Wunder - Bootstrap Material Admin Dashboard Template</title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <meta name="viewport" content="width=device-width" />
  <!-- Bootstrap core CSS     -->
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../assets/vendors/material.min.css" rel="stylesheet" />
  <!--  Material Dashboard CSS    -->
  <link href="../assets/css/wunder.css" rel="stylesheet" />
  <!--  CSS for Demo Purpose, don't include it in your project     -->
  <link href="../assets/css/demo.css" rel="stylesheet" />
  <!--     Fonts and icons     -->
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
  <link href="../../assets/vendors/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
</head>

<body>
    <div class="wrapper">
      <nav class="sidebar" data-background-color="white">
        <div class="logo">
            <a href="#" class="simple-text">
                Wunder Admin
            </a>
        </div>
        <div class="logo logo-mini">
            <a href="#" class="simple-text">
                W
            </a>
        </div>
        <div class="sidebar-wrapper">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a  class="nav-link active" href="index.html">
                        <i class="material-icons">dashboard</i>
                        <p>Dashboard</p>
                    </a>
                </li>
            </ul>
        </div>
      </nav>
      <div class="main-panel">
        <nav class="navbar navbar-toggleable-md navbar-default navbar-absolute navbar-inverse">
            <div class="navbar-minimize">
              <button id="minimizeSidebar" class="btn btn-round btn-white btn-fill btn-just-icon">
                <i class="material-icons visible-on-sidebar-regular f-26">keyboard_arrow_left</i>
                <i class="material-icons visible-on-sidebar-mini f-26">keyboard_arrow_right</i>
              </button>
            </div>
            <div class="navbar-header d-flex">
              <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"> Template </a>
            <div class="collapse navbar-collapse">
            </div>
        </nav>
        <div class="content">
            <div class="container-fluid">
            </div>
        </div>
        <footer class="footer">
            <div class="container">
            </div>
        </footer>
      </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/vendors/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../assets/vendors/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../assets/vendors/tether.min.js" type="text/javascript"></script>
<script src="../assets/vendors/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/vendors/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>

<!-- Wunder Admin javascript methods -->
<script src="../assets/js/wunder.min.js"></script>
<!-- Wunder Admin DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.min.js"></script>

</html>
                                

Widgets

Here is a list of widgets that can be used to build your application faster.

Task List

Create tasklists easily using the below HTML markup

<table class="table">
  <tbody>
    <tr>
      <td>
        <div class="checkbox">
          <label>
            <input type="checkbox" name="optionsCheckboxes" checked>
          </label>
        </div>
      </td>
      <td>Task Description goes here</td>
      <td class="td-actions text-right">
        <button type="button" rel="tooltip" title="Edit Task" class="btn btn-primary btn-simple btn-xs">
          <i class="material-icons">edit</i>
        </button>
        <button type="button" rel="tooltip" title="Remove" class="btn btn-danger btn-simple btn-xs">
          <i class="material-icons">close</i>
        </button>
      </td>
    </tr>
    ......
  </tbody>
</table>
                                

Profile Card

Profile card HTML markup

<div class="card card-profile">
  <div class="card-avatar">
    <a href="#pablo">
      <img class="img" src="../../assets/img/faces/avatar.jpg" />
    </a>
  </div>
  <div class="card-content">
    <h6 class="category text-gray">Designation</h6>
    <h4 class="card-title">Your Name</h4>
    <p class="description">
      Your description goes here...
    </p>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-xs-3 bg-info">
        <div class="profile-social-wrapper">
          <span class="profile-count">245</span>
          <small class="">Followers</small>
        </div>
      </div>
      <div class="col-xs-3 bg-info-alt">
        <div class="profile-social-wrapper">
          <span class="profile-count">55</span>
          <small class="">Following</small>
        </div>
      </div>
      <div class="col-xs-3 bg-info">
        <div class="profile-social-wrapper">
          <span class="profile-count">2,035</span>
          <small class="">Tweets</small>
        </div>
      </div>
      <div class="col-xs-3 bg-info-alt">
        <div class="profile-social-wrapper">
          <span class="profile-count">16,000</span>
          <small class="">Likes</small>
        </div>
      </div>
    </div>
  </div>
</div>
                                

Testimonial

Testimonial HTML markup

<div class="card card-testimonial">
  <div class="card-avatar">
    <a href="#pablo">
      <img class="img" src="../../assets/img/faces/avatar.jpg" />
    </a>
  </div>
  <div class="card-content">
    <div class="icon">
      <i class="material-icons">format_quote</i>
    </div>
    <h5 class="card-description">
      Testimonial goes here...
    </h5>
    <h4 class="card-title">Customer Name</h4>
    <h6 class="category text-gray">Designation, Company Name</h6>
  </div>
</div>
                                

Timeline

Timeline HTML markup

<ul class="timeline timeline-simple">
  <li class="timeline-inverted">
    <div class="timeline-image danger">
      <img src="../../assets/img/faces/avatar.jpg" >
    </div>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <span class="label label-danger">Some title</span>
      </div>
      <div class="timeline-body">
        <p>Your content goes here...</p>
      </div>
      <h6>
        <i class="ti-time"></i> 11 hours ago via Twitter
      </h6>
    </div>
  </li>
  ...
</ul>
                                

Shopping Cart

Timeline HTML markup

<div class="table-responsive">
  <table class="table table-shopping">
    <thead>
      <tr>
        <th class="text-center"></th>
        <th>Product</th>
        <th class="text-right">Price</th>
        <th class="text-right">Qty</th>
        <th class="text-right">Amount</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="img-container">
            <img src="../../assets/img/product-image.jpg" alt="...">
          </div>
        </td>
        <td class="td-name">
          <a href="#jacket">Product Name</a>
          <br />
          <small>by Vendor Name</small>
        </td>
        <td class="td-number text-right">
          <small>&euro;</small>549
        </td>
        <td class="td-number">
          1
        </td>
        <td class="td-number">
          <small>&euro;</small>549
        </td>
        <td class="td-actions">
          <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
            <i class="material-icons">close</i>
          </button>
        </td>
      </tr>

      <tr>
        <td colspan="3"></td>
        <td class="td-total">
          Total
        </td>
        <td colspan="1" class="td-price">
          <small>&euro;</small>2,346
        </td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4"></td>
        <td colspan="2" class="text-right">
          <button type="button" class="btn btn-info btn-round">Proceed To Checkout <i class="material-icons">keyboard_arrow_right</i></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
                                

Manage Listings

Product Listing HTML markup

<div class="card card-product">
  <div class="card-image" data-header-animation="false">
    <a href="#pablo">
      <img class="img" src="../../assets/img/product-image.jpg">
    </a>
  </div>
  <div class="card-content">
    <div class="card-actions">
      <button type="button" class="btn btn-danger btn-simple fix-broken-card">
        <i class="material-icons">build</i> Fix Header!
      </button>
      <button type="button" class="btn btn-default btn-simple" rel="tooltip" data-placement="bottom" title="View">
        <i class="material-icons">art_track</i>
      </button>
      <button type="button" class="btn btn-success btn-simple" rel="tooltip" data-placement="bottom" title="Edit">
        <i class="material-icons">edit</i>
      </button>
      <button type="button" class="btn btn-danger btn-simple" rel="tooltip" data-placement="bottom" title="Remove">
        <i class="material-icons">close</i>
      </button>
    </div>
    <h4 class="card-title">
      <a href="#pablo">Product Name</a>
    </h4>
    <div class="card-description">
      Product Description goes here...
    </div>
  </div>
  <div class="card-footer">
    <div class="price">
      <h4>$100</h4>
    </div>
    <div class="stats float-right">
      <p class="category"><i class="material-icons">place</i> Category</p>
    </div>
  </div>
</div>
                                

Google Maps

Google map HTML markup

<div id="regularMap" class="map"></div>
                                

Javascript

// Regular Map
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  scrollwheel: false,
}

var map = new google.maps.Map(document.getElementById("regularMap"), mapOptions);

var marker = new google.maps.Marker({
  position: myLatlng,
  title:"Regular Map!"
});

marker.setMap(map);
                                

FullCalendar

Basic Usage

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar, jQuery, and Moment JavaScript files, in the <head> of your page:

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

jQuery and Moment must be loaded before FullCalendar's JavaScript.

Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery's $(document).ready like so:

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});

The above code should be in a <script> tag in the head of your page. The code relies on there being an element with an id of "calendar" in the body of your page. The calendar will be placed inside this div:

<div id='calendar'></div>

An that's it, you should see a month-based calendar that has no events on it.

Please checkout full documentation for more features.

Pricing Table

 <div class="row">
  <div class="col-md-3">
    <div class="card price-table">
      <div class="pt-top-bar"></div>
      <div class="pt-header">
        <h4 class="text-uppercase">Starter Plan</h4>
        <h2>
          <sup class="f-22">$</sup>
          <span class="f-50">99</span>
          <span class="f-14">/ mo</span>
        </h2>
      </div>
      <ul class="pt-body list-group text-left">
        <li class="list-group-item">
          <i class="material-icons">check</i> Feature 1
        </li>
        ...
      </ul>
      <div class="pt-footer text-center">
        <a href="" class="btn">Start your free trial</a>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card price-table recommended">
      <div class="pt-top-bar"></div>
      <div class="pt-header">
        <h4 class="text-uppercase">Premium Plan</h4>
        <h2>
          <sup class="f-22">$</sup>
          <span class="f-50">179</span>
          <span class="f-14">/ mo</span>
        </h2>
      </div>
      <ul class="pt-body list-group text-left">
        <li class="list-group-item">
          <i class="material-icons">check</i> Feature 1
        </li>
        ...
      </ul>
      <div class="pt-footer text-center">
        <a href="" class="btn">Start your free trial</a>
      </div>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card price-table">
      ...
    </div>
  </div>

  <div class="col-md-3">
    <div class="card price-table">
      ...
    </div>
  </div>
</div>

Charts

Chart.js

Simple yet flexible JavaScript charting for designers & developers.

Usage

To import Chart.js using an old-school script tag:

<script src="Chart.js"></script>
<script>
    var myChart = new Chart({...})
</script>

To import Chart.js using an awesome module loader:


// Using CommonJS
var Chart = require('src/chart.js')
var myChart = new Chart({...})

// ES6
import Chart from 'src/chart.js'
let myChart = new Chart({...})

// Using requirejs
require(['path/to/Chartjs'], function(Chart){
 var myChart = new Chart({...})
})

Creating a Chart

To create a chart, we need to instantiate the Chart class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.

<canvas id="myChart" width="400" height="400"></canvas>

// Any of the following formats may be used
var ctx = document.getElementById("myChart");
var ctx = document.getElementById("myChart").getContext("2d");
var ctx = $("#myChart");
var ctx = "myChart";

Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!

The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.

There are many examples of Chart.js that are available in the /samples folder of Chart.js.zip that is attatched to every release.

Chart Configuration

Chart.js provides a number of options for changing the behaviour of created charts. These configuration options can be changed on a per chart basis by passing in an options object when creating the chart. Alternatively, the global configuration can be changed which will be used by all charts created after that point.

Chart Data

To display data, the chart must be passed a data object that contains all of the information needed by the chart. The data object can contain the following parameters

Name Type Description
datasets Array[object] Contains data for each dataset. See the documentation for each chart type to determine the valid options that can be attached to the dataset
labels Array[string] Optional parameter that is used with the category axis.
xLabels Array[string] Optional parameter that is used with the category axis and is used if the axis is horizontal
yLabels Array[string] Optional parameter that is used with the category axis and is used if the axis is vertical
Creating a Chart with Options

To create a chart with configuration options, simply pass an object containing your configuration to the constructor. In the example below, a line chart is created and configured to not be responsive.

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        responsive: false
    }
});

Please refer to http://www.chartjs.org/docs/ for detailed documentation

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Usage

Include jquery.flot.js into your document.

<script src="../../vendors/charts/flot/jquery.flot.js"></script>
                  
The markup

<div id="line-chart" style="width:50%;height:300px" ></div>
                      
Call the plugin

Finally you need to initiate the plugin by adding the following code.

var d1 = [[0,30],[1,35],[2,35],[3,30],[4,30],[5,35],[6,32],[7,37],[8,30],[9,35],[10,30],[11,31]];
var d2 = [[0,50],[1,40],[2,45],[3,60],[4,50],[5,50],[6,60],[7,55],[8,50],[9,50],[10,60],[11,35]];
var d3 = [[0,40],[1,50],[2,35],[3,25],[4,40],[5,45],[6,55],[7,50],[8,35],[9,40],[10,48],[11,40]];


//Chart Options

var options = {
  series: {
    shadowSize: 0,
    lines: {
      show: true,
    },
  },
  grid: {
    borderWidth: 1,
    labelMargin:10,
    mouseActiveRadius:6,
    borderColor: '#eee',
    show : true,
    hoverable : true,
    clickable : true

  },
  xaxis: {
    tickColor: '#fff',
    tickDecimals: 0,
    font :{
      lineHeight: 13,
      style: "normal",
      color: "#9f9f9f"
    },
    shadowSize: 0,
    ticks: [[0,"Jan"], [1,"Feb"], [2,"Mar"], [3,"Apr"], [4,"May"], [5,"Jun"], [6,"Jul"], [7,"Aug"], [8,"Sep"], [9,"Oct"], [10,"Nov"], [11,"Dec"]]
  },

  yaxis: {
    tickColor: '#eee',
    tickDecimals: 0,
    font :{
      lineHeight: 13,
      style: "normal",
      color: "#9f9f9f",
    },
    shadowSize: 0
  },

  legend: {
    container: '.flc-line',
    backgroundOpacity: 0.5,
    noColumns: 0,
    backgroundColor: "white",
    lineWidth: 0
  },
  colors: ["#6baa01", "#33bdda", "#008ee4"]
};


// Create a regular Line Chart


$.plot($("#doc-line-chart"), [
  {data: d1, lines: { show: true  }, label: 'Product A', stack: true, color: '#F9D900' },
  {data: d2, lines: { show: true }, label: 'Product B', stack: true, color: '#A9E200' },
  {data: d3, lines: { show: true }, label: 'Product C', stack: true, color: '#22BAD9' }
], options);
                      

Please refer to http://www.flotcharts.org// for detailed documentation

UI Elements

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more. Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.

Accordion displays collapsible content panels for presenting information in a limited amount of space. Wunder uses jQuery UI to implement the accordion. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Heading 1

Heading 2

Heading 3

<div id="simple-accordion" class="accordion">
  <h3 class="accordion-header">Heading 1</h3>
  <div class="accordion-content" data-wrapper="true" style="height: 0px; position: relative; overflow: hidden;" aria-expanded="false">
    <div>
      <p>Content goes here.</p>
    </div>
  </div>

  <h3 class="accordion-header">Heading 2</h3>
  <div class="accordion-content" data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
    <div>
      <p>Content goes here.</p>
    </div>
  </div>

  <h3 class="accordion-header">Heading 3</h3>
  <div class="accordion-content" data-wrapper="true" style="overflow:hidden;height:0;position:relative;" aria-expanded="false">
    <div>
      <p>Content goes here.</p>
    </div>
  </div>
</div>

Please refer to http://api.jqueryui.com/accordion/ for detailed documentation

Sweet Alert2 (Dialogs)

A beautiful and customizable replacement for JavaScript's popup boxes Supported fork of t4t5/sweetalert. SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable. Here is a basic example

swal("Here is a message!")

Please refer to http://limonte.github.io/sweetalert2/ for detailed documentation

Wunder use material design style for buttons, with various colors and options.

Basic Buttons

We use any of the available button classes to quickly create a styled button.

Bootstrap Default, disabled and customized material design Buttons
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-white">White</button>
Button Sizes

You can have larger or smaller buttons by adding sizing classes.

<button class="btn btn-default btn-lg">Large</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-default btn-sm">Small</button>
<button class="btn btn-default btn-xs">Extra Small</button>

Button Dropdowns

<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown
    <span class="caret"></span>
  </button>
  <div class="dropdown-menu" role="menu">
    <a href="#" class="dropdown-item">Dropdown link</a>
    <a href="#" class="dropdown-item">Dropdown link</a>
  </div>
</div>

Button Icons and Shapes

<button class="btn btn-primary btn-icon-text"><i class="zmdi zmdi-home f-20"></i> Home</button>
<button class="btn btn-primary btn-round"><i class="zmdi zmdi-home f-20"></i></button>

Button Groups

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Here is a color palette based on the material design base colors. Each of these colors is defined with a base color class and an optional lighten or darken class..

How to add a color?

On Material design color page, you just have to copy and name of the color and use it as a class for the element you want to change color.

Below example shows how to give a grey background for the card :

  1. <div class="card md-bg-grey-500 ">
  2. // YOUR CONTENT
  3. </div>

What about text color?

You can use this color palette for text color too.

Below example shows how to give an indigo color for a paragraph in the card:

  1. <div class="card md-bg-indigo">
  2. // YOUR CONTENT
  3. </div>
See Material Design Colors

Material Design for Bootstrap includes 490 original Material Design icons! These icons are extracted from the original Google sources. They are provided as an iconic and easy to use font. Just hover icon on Material design icons to see his classname.

Here is an example of an icon:

  1. <i class="zmdi zmdi-coffee"></i>

See Material Design Icons

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.


<!-- Button trigger modal -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      Content goes here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
                

<a data-toggle="modal" href="#modalDefault" class="btn btn-sm btn-default">Modal -
  Default</a>

Bootstrap Notify- This plugin helps to turn standard bootstrap alerts into "growl" like notifications.

This is a notification with close button.
<div class="alert alert-info">
  <button type="button" aria-hidden="true" class="close">
    <i class="material-icons">close</i>
  </button>
  <span>This is a notification with close button.</span>
</div>
                

HTML

<button class="btn btn-primary btn-block" onclick="demo.showNotification('top','right')">Top Right</button>

Javascript

<script>
showNotification: function(from, align){
  type = ['','info','success','warning','danger','rose','primary'];

  color = Math.floor((Math.random() * 6) + 1);

  $.notify({
    icon: "notifications",
    message: "Welcome to <b>Material Dashboard</b> - a beautiful freebie for every web developer."

  },{
    type: type[color],
    timer: 3000,
    placement: {
      from: from,
      align: align
    }
  });
}
</script>

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content.

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

This is very nice.
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.
HTML Markup
<ul class="nav nav-pills nav-pills-primary">
  <li class="nav-item">
    <a href="#pill1" class="nav-link active" data-toggle="tab">Tab1</a>
  </li>
  <li class="nav-item">
    <a href="#pill2" class="nav-link" data-toggle="tab">Tab2</a>
  </li>
  <li class="nav-item">
    <a href="#pill3" class="nav-link" data-toggle="tab">Tab3</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="pill1">
    Tab1 Content goes here.
  </div>
  <div class="tab-pane" id="pill2">
    Tab2 Content goes here.
  </div>
  <div class="tab-pane" id="pill3">
    Tab3 Content goes here.
  </div>
</div>
Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Wunder heading

h2. Wunder heading

h3. Wunder heading

h4. Wunder heading

h5. Wunder heading
h6. Wunder heading
<h1>h1. Wunder heading</h1>
<h2>h2. Wunder heading</h2>
<h3>h3. Wunder heading</h3>
<h4>h4. Wunder heading</h4>
<h5>h5. Wunder heading</h5>
<h6>h6. Wunder heading</h6>
Paragraph

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

<p>I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.</p>
Quote

I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

Maya Angelou
<blockquote>
  <p>
    I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
  </p>
  <small>
    Maya Angelou
  </small>
</blockquote>
Muted Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-muted">
  To live is the rarest thing in the world. Most people exist, that is all.
</p>
Primary Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-primary">
  To live is the rarest thing in the world. Most people exist, that is all. </p>
Info Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-info">
  To live is the rarest thing in the world. Most people exist, that is all. </p>
Success Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-success">
  To live is the rarest thing in the world. Most people exist, that is all. </p>
Warning Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-warning">
  To live is the rarest thing in the world. Most people exist, that is all.
</p>
Danger Text

To live is the rarest thing in the world. Most people exist, that is all.

<p class="text-danger">
  To live is the rarest thing in the world. Most people exist, that is all. </p>

Small Tag
Header with small subtitle
Use "small" tag for the headers
<h2>
  <h5>Small Tag</h5>
  Header with small subtitle
  <br>
  <small>Use "small" tag for the headers</small>
</h2>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul>
  <li>...
  </li>
</ul>
Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...
  </li>
</ol>
Ordered - Roman
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol type="i">
  <li>...
  </li>
</ol>
Custom - 1
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="clist clist-angle">
  <li>...</li>
</ul>
Custom - 2
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul class="clist clist-check">
  <li>...</li>
</ul>

Forms

This section contains basic and advanced form elements, validations, sample forms and form wizard

Supported controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

With help
A block of help text that breaks onto a new line.
<div class="form-group">
  <label class="col-form-label"></label>
  <input type="text" class="form-control" value>
  <span class="form-text text-muted">A block of help text that breaks onto a new line.</span>
</div>
Password
<div class="form-group">
  <label class="col-form-label"></label>
  <input type="password" class="form-control" value>
</div>
Placeholder
<div class="form-group">
  <label class="col-form-label"></label>
  <input type="text" class="form-control" placeholder="placeholder">
</div>
Disabled
<div class="form-group">
  <label class="col-form-label"></label>
  <input type="text" placeholder="Disabled input here..." disabled="" class="form-control">
</div>
Static control

www.example.com

<h5>Static control</h5>
<div class="form-group">
  <p class="form-control-static">www.example.com</p>
</div>
Checkboxes and radios
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes"> First Checkbox
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes"> Second Checkbox
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" checked id="radio1">
    <label for="radio1">First Radio</label>
  </label>
</div>
<div class="radio">
  <input type="radio" name="optionsRadios" id="radio2">
  <label for="radio2">Second Radio</label>
</div>
Inline checkboxes
<div class="checkbox form-check-inline">
  <label>
    <input type="checkbox" name="optionsCheckboxes">a
  </label>
</div>
<div class="checkbox form-check-inline">
  <label>
    <input type="checkbox" name="optionsCheckboxes">b
  </label>
</div>
<div class="checkbox form-check-inline">
  <label>
    <input type="checkbox" name="optionsCheckboxes">c
  </label>
</div>

Custom Checkboxes & radios
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes"> Unchecked
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes" checked> Checked
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes" disabled> Disabled Unchecked
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" name="optionsCheckboxes" checked disabled> Disabled Checked
  </label>
</div>
<div class="radio">
    <input type="radio" name="optionsRadios" checked id="radio-on">
    <label for="radio-on">Radio is on</label>
</div>
<iv class="radio">
  <input type="radio" name="optionsRadios" id="radio-off">
  <label for="radio-off">Radio is off</label>
</div>
<div class="radio">
    <input type="radio" name="optionsRadiosDisabled" checked disabled id="radio-on-disabled">
    <label for="radio-on-disabled">Disabled Radio is on</label>
</div>
<div class="radio">
  <input type="radio" name="optionsRadiosDisabled" disabled id="radio-off-disabled">
  <label for="radio-off-disabled">Disabled radio is off</label>
</div>
Column sizing
<div class="row">
  <div class="col-lg-3">
    <div class="form-group">
      <label class="col-form-label"></label>
      <input type="text" class="form-control" placeholder=".col-lg-3">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="form-group">
      <label class="col-form-label"></label>
      <input type="text" class="form-control" placeholder=".col-lg-4">
    </div>
  </div>
  <div class="col-lg-5">
    <div class="form-group">
      <label class="col-form-label"></label>
      <input type="text" class="form-control" placeholder=".col-lg-5">
    </div>
  </div>
</div>

See Material Design Form Elements

DateTime Picker

Extend form controls by adding text or buttons before, after, or on both sides of any text-based inputs.

Basic Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

Datetime Picker

Datetime Picker

Datetime Picker


<div class="container">
  <div class="row">
    <div class='col-md-6'>
      <div class="form-group">
        <label class="label-control">Date Picker</label>
        <input type="text" class="form-control datepicker" value="10/05/2016" />
      </div>
    </div>
    <script type="text/javascript">
      $(function () {
          $('#datetimepicker1').datetimepicker();
      });
    </script>
  </div>
</div>
              

Toggle Switch

Default and Disabled options. Use the given data attribute to change the color scheme of the Toggle Switch


<div class="togglebutton">
  <label>
    <input type="checkbox" checked> Toggle is on
    <span class="toggle"></span>
  </label>
</div>
<div class="togglebutton">
  <label>
    <input type="checkbox"> Toggle is off
    <span class="toggle"></span>
  </label>
</div>
              

Input Slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices.

Javascript

<script src="../../vendors/nouislider/distribute/nouislider.min.js"></script>

              

HTML

<div id="input-slider" class="input-slider m-b-25"></div>
              


Simple File Input

The file input plugin allows you to create a visually appealing file or image input widgets


Basic Example

Select file Change ×

Javascript


<script src="../../vendors/fileinput/fileinput.min.js"></script>

              

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="btn btn-primary btn-file m-r-10">
    <span class="fileinput-new">Select file</span>
    <span class="fileinput-exists">Change</span>
    <input type="file" name="...">
  </span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput">&times;</a>
</div>
              

Drop Files (Dropzone.js)

Drop files here or click to upload.
(This is just a demo dropzone. Selected files are not actually uploaded.)

Javascript


<link href="../../vendors/dropzone/dropzone.min.css" rel="stylesheet">

<script src="../../vendors/dropzone/dropzone.min.js"></script>

              

HTML

<div id="dropzone">
  <form action="/upload" class="dropzone needsclick" id="demo-upload">
    <div class="dz-message needsclick">
    Drop files here or click to upload.<br />
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
    </div>
  </form>
</div>
              

Image Preview

Select image Change Remove

HTML

<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput"></div>
  <div>
    <span class="btn btn-info btn-file">
      <span class="fileinput-new">Select image</span>
      <span class="fileinput-exists">Change</span>
      <input type="file" name="...">
    </span>
    <a href="#" class="btn btn-danger fileinput-exists"
       data-dismiss="fileinput">Remove</a>
  </div>
</div>
              

Basic Example

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Input with success

<div class="form-group has-success">
  <label class="col-form-label"></label>
  <input type="text" class="form-control form-control-success" value="Success">
</div>
                            

Input with error


<div class="form-group has-error">
  <label class="col-form-label"></label>
  <input type="text" class="form-control form-control-danger" value="Error Input">;
</div>
                            

Type Validation

<div class="form-group row">
  <label class="col-md-2 col-form-label"></label>
  <div class="col-md-7">
     <input class="form-control" type="text" name="required" required="true" />
  </div>
  <label class="col-md-3">
    <code>required</code>
  </label>
</div>
                            
<div class="form-group row">
    <label class="col-md-2 col-form-label">Email</label>
    <div class="col-md-7">
        <input class="form-control" type="text" name="email" email="true" />
    </div>
    <label class="col-md-3">
        <code>email="true"</code>
    </label>
</div>
                            
<div class="form-group row">
    <label class="col-md-2 col-form-label">Number</label>
    <div class="col-md-7">
        <input class="form-control" type="text" name="number" number="true" />
    </div>
    <label class="col-md-3">
        <code>number="true"</code>
    </label>
</div>
                            
<div class="form-group row">
    <label class="col-md-2 col-form-label">Url</label>
    <div class="col-md-7">
        <input class="form-control" type="text" name="url" url="true" />
    </div>
    <label class="col-md-3">
        <code>url="true"</code>
    </label>
</div>
                            
<div class="form-group row">
    <label class="col-md-2 col-form-label">Equal to</label>
    <div class="col-md-3">
        <input class="form-control" id="idSource" type="text" placeholder="#idSource" />
    </div>
    <div class="col-md-3">
        <input class="form-control" id="idDestination" type="text" placeholder="#idDestination" equalTo="#idSource" />
    </div>
    <label class="col-md-4">
        <code>equalTo="#idSource"</code>
    </label>
</div>
                            

Form Wizard

Form wizard based on the jQuery twitter bootstrap wizard plugin twitter-bootstrap-wizard







Starts with http://

Between 5 and 10



This is supporting text for this field.

<div id="formwizard_simple" class="form-wizard form-wizard-horizontal">
  <form class="form floating-label">
    <div class="form-wizard-nav">
      <div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>
      <ul class="nav nav-justified nav-pills">
        <li class="nav-item"><a class="nav-link active" href="#fws_tab1" data-toggle="tab"><span class="step">1</span> <span class="title">LOCATION</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fws_tab2" data-toggle="tab"><span class="step">2</span> <span class="title">ADDRESS</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fws_tab3" data-toggle="tab"><span class="step">3</span> <span class="title">SETTINGS</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fws_tab4" data-toggle="tab"><span class="step">4</span> <span class="title">CONFIRM</span></a></li>
      </ul>
    </div><!--end .form-wizard-nav -->
    <div class="tab-content clearfix p-30">
      <div class="tab-pane active" id="fws_tab1">
      </div><!--end #tab1 -->
      <div class="tab-pane" id="fws_tab2">
      </div><!--end #tab2 -->
      <div class="tab-pane" id="fws_tab3">
      </div><!--end #tab3 -->
      <div class="tab-pane" id="fws_tab4">
      </div><!--end #tab4 -->
      <ul class="pagination wizard pagination-pager">
        <li class="previous first disabled page-item"><a class="btn-raised page-link" href="javascript:void(0);">First</a></li>
        <li class="previous disabled page-item"><a class="btn-raised page-link" href="javascript:void(0);">Previous</a></li>
        <li class="next last page-item"><a class="btn-raised page-link" href="javascript:void(0);">Last</a></li>
        <li class="next page-item"><a class="btn-raised page-link" href="javascript:void(0);">Next</a></li>
      </ul>
    </div><!--end .tab-content -->
  </form>
</div><!--end #rootwizard -->
                            

Validation Form Wizard

Form wizard with validation





Starts with http://

Between 5 and 10



This is supporting text for this field.

<div id="formwizard_validation" class="form-wizard form-wizard-horizontal">
  <form class="form floating-label form-validation" role="form" novalidate="novalidate">
    <div class="form-wizard-nav">
      <div class="progress" style="width: 75%;"><div class="progress-bar progress-bar-primary" style="width: 0%;"></div></div>
      <ul class="nav nav-justified nav-pills">
        <li class="nav-item"><a class="nav-link active" href="#fwv_step1" data-toggle="tab"><span class="step">1</span> <span class="title">PERSONAL</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fwv_step2" data-toggle="tab"><span class="step">2</span> <span class="title">ACCOUNT</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fwv_step3" data-toggle="tab"><span class="step">3</span> <span class="title">SETTINGS</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#fwv_step4" data-toggle="tab"><span class="step">4</span> <span class="title">CONFIRM</span></a></li>
      </ul>
    </div><!--end .form-wizard-nav -->
    <div class="tab-content clearfix p-30">
      <div class="tab-pane active" id="fwv_step1">
      </div><!--end #step1 -->
      <div class="tab-pane" id="fwv_step2">
      </div><!--end #step2 -->
      <div class="tab-pane" id="fwv_step3">
      </div><!--end #step3 -->
      <div class="tab-pane" id="fwv_step4">
      </div><!--end #step4 -->
      <ul class="pagination wizard pagination-pager">
        <li class="previous first disabled page-item"><a class="btn-raised page-link" href="javascript:void(0);">First</a></li>
        <li class="previous disabled page-item"><a class="btn-raised page-link" href="javascript:void(0);">Previous</a></li>
        <li class="next last page-item"><a class="btn-raised page-link" href="javascript:void(0);">Last</a></li>
        <li class="next page-item"><a class="btn-raised page-link" href="javascript:void(0);">Next</a></li>
      </ul>
    </div><!--end .tab-content -->
  </form>
</div><!--end #rootwizard -->
                            

Stacked Form


<form method="#" action="#">
  <div class="form-group">
    <label class="col-form-label">Email address</label>
    <input type="email" class="form-control">
  </div>
  <div class="form-group">
    <label class="col-form-label">Password</label>
    <input type="password" class="form-control">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" name="optionsCheckboxes"> Subscribe to newsletter
    </label>
  </div>
  <button type="submit" class="btn btn-fill btn-default">Submit</button>
</form>

Horizontal Form


<form class="form-horizontal">
  <div class="form-group row">
    <label class="col-lg-3 col-form-label">Email</label>
    <div class="col-lg-9">
      <input type="email" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-lg-3 col-form-label">Password</label>
    <div class="col-lg-9">
      <input type="password" class="form-control">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-lg-3"></label>
    <div class="col-lg-9">
      <div class="checkbox checkbox-inline">
        <label>
          <input type="checkbox" name="optionsCheckboxes"> Remember Me
        </label>
      </div>
    </div>
  </div>
  <div class="row">
    <label class="col-lg-3"></label>
    <div class="col-lg-9">
      <div class="form-group form-button">
        <button type="submit" class="btn btn-fill btn-default">Sign in</button>
      </div>
    </div>
  </div>
</form>

Tables

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu, chat menu and page content.

Tables Layouts & Structure

Table Layouts

This template use the default bootstrap table markup. You can read more about it here: http://v4-alpha.getbootstrap.com/content/tables/.

Striped table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

<table class="table table-striped">
  <!-- TABLE CONTENT -->
</table>
Bordered table

Use .table-bordered for borders on all sides of the table and cells.


<table class="table table-bordered">
  <!-- TABLE CONTENT -->
</table>
Hover rows

Use .table-hover to enable a hover state on table.

<table class="table table-hover">
  <!-- TABLE CONTENT -->
</table>
Contextual classes

Use contextual classes to color table rows or individual cells.

<table class="table">
  <thead>
    <tr>...</tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <td>1</td>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-success">...</tr>
    <tr>...</tr>
    <tr class="table-danger">...</tr>
  </tbody>
</table>
DataTables Table plug-in for jQuery

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Include the following script files into your document.
<body>
  ....
  <!-- jQuery -->
  <script src="../../vendors/jquery/dist/jquery.min.js"></script>
  <!-- DataTables.net plugins -->
  <script src="../../assets/vendors/datatable/jquery.dataTables.min.js"></script>
  <script src="../../assets/vendors/datatable/dataTables.bootstrap4.js"></script>
  <script src="../../assets/js/data-table.min.js"></script>
</body>
HTML

For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a body (tbody). An optional footer (tfoot) can also be used.

<table id="table_id" class="display">
  <thead>
      <tr>
          <th>Column 1</th>
          <th>Column 2</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
    </tr>
  </tbody>
</table>

If you are generating your HTML document using a server-side program, such as a PHP script, a Ruby script, a C# program or anything else - all they need to do is output your table like this. This is exactly what you would have for a normal HTML table, although sometimes you might need to add the thead and tbody tags, as these aren't always used (they allow DataTables to know what should be used for the column headers and the click-to-order controls).

Note that DataTables can actually generate the thead and tbody for you, along with all of the rows and cells of the table, if you are using Ajax sourced data, but for the moment we'll focus on a plain HTML. For more information about the different data sources DataTables can use, please see the data sources section

Javascript
$("#myTable").DataTable();

Credits

Wunder uses the following images and Javascript & CSS libraries:

Wunder/
  │
  └──vendors
    ├──bootgrid/ (https://github.com/rstaib/jquery-bootgrid)
    ├──bootstrap/ (getbootstrap.com)
    ├──bootstrap-growl/ (https://github.com/ifightcrime/bootstrap-growl)
    ├──bootstrap-select/ (http://silviomoreto.github.io/bootstrap-select/)
    ├──bootstrap-wizard/ (http://vadimg.com/twitter-bootstrap-wizard-example/)
    ├──charts
    │   ├──Flot/ (http://www.flotcharts.org/)
    │   ├──ChartJS/ (http://www.chartjs.org/)
    ├──dropzone
    ├──eonasdan-bootstrap-datetimepicker/ (http://eonasdan.github.io/bootstrap-datetimepicker/)
    ├──farbtastic/ (https://github.com/mattfarina/farbtastic)
    ├──fileinput/ (http://jasny.github.com/bootstrap/javascript/#fileinput)
    ├──flag-icons
    ├──fullcalendar/ (http://fullcalendar.io)
    ├──gallery
    ├──input-mask/ (http://blog.igorescobar.com)
    ├──jquery/ (jquery.com)
    ├──jquery-ui
    ├──jquery-ui-1.12.0
    ├──jquery-ui-1.12.0.custom.zip
    ├──lightgallery
    ├──malihu-custom-scrollbar-plugin
    ├──map
    ├──material-design-iconic-font/ (http://zavoloklom.github.io/material-design-iconic-font/icons.html)
    ├──moment/ (http://momentjs.com/)
    ├──nouislider/ (http://refreshless.com/nouislider/)
    ├──simpleWeather/ (http://simpleweatherjs.com/)
    ├──sweetalert2
    └── weather-icons

Images used in this template are taken from Pixabay