[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Form Elements

Forms are used to collect user information with different element types of input, select, checkboxes, radios and more.

###### Basic Form Input

A basic form control with disabled and readonly mode.

Source Code

    <input class="form-control" placeholder="Input box" type="text">
    <input class="form-control" placeholder="Input box" type="text" readonly>
    <input class="form-control" placeholder="Input box" type="text" disabled>

###### Valid State Input

A form control with success, warning and error state.

Source Code

    <input class="form-control is-valid" placeholder="Input box" type="text">
    <input class="form-control is-warning" placeholder="Input box" type="text">
    <input class="form-control is-invalid" placeholder="Input box" type="text">

###### Custom Checkboxes and Radios

A custom styled checkboxes and radios.

Checkbox Unchecked
Checkbox Checked
Checkbox Disabled
Radio Unchecked
Radio Checked
Radio Disabled

Checkbox Source Code

    <label class="ckbox">
      <input type="checkbox">
      <span>Checkbox Unchecked</span>
    </label>

Radiobox Source Code

    <label class="rdiobox">
      <input name="rdio" type="radio">
      <span>Radio Unchecked</span>
    </label>

###### Active State Color Variant

A custom styled checkboxes and radios with colored active state.

Checkbox Primary (default) Checkbox Success Checkbox Indigo
Radio Primary (default) Radio Success Radio Indigo

Source Code

    <label class="ckbox ckbox-success">...</label>
    <label class="rdiobox rdiobox-success">...</label>

Class Reference

Class | Values
--- | ---
`class="ckbox ckbox-[value]"` | success | warning | danger | info | teal | indigo | purple | pink | orange | dark
`class="rdiobox rdiobox-[value]"`

###### Custom Select Box

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

Source Code

    <select class="form-control select2" data-placeholder="Choose Browser">
      <option value="Firefox">Firefox</option>
      <option value="Chrome">Chrome</option>
      <option value="Safari">Safari</option>
      <option value="Opera">Opera</option>
      <option value="Internet Explorer">Internet Explorer</option>
    </select>

###### File Browser

A custom styled file browser.

Choose file
Choose file

Source Code

    <div class="custom-file">
      <input type="file" id="file" class="custom-file-input">
      <label class="custom-file-label"></label>
    </div>

###### Toggle Switches

A lightweight jQuery plugin that creates easily-styleable toggle buttons.

Source Code

    <div class="br-toggle br-toggle-rounded br-toggle-primary on">
      <div class="br-toggle-switch"></div>
    </div>

Class Reference

Class | Values
--- | ---
`class="br-toggle br-toggle-[value]"` | primary | success | warning | danger | info | teal | indigo | purple | pink | orange
`class="br-toggle br-toggle-rounded"` | Convert the toggle button to rounded shape

###### Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

@ex.com
$
.00

Source Code

    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>
      </div>
      <input type="text" class="form-control" placeholder="Username">
    </div><!-- input-group -->

###### Input Mask

Input masks allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phones, etc).

Source Code

    $('#dateMask').mask('99/99/9999');
    $('#phoneMask').mask('(999) 999-9999');
    $('#ssnMask').mask('999-99-9999');

###### Input Tags

User interface for managing tags.

Source Code

    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput">

###### Date Picker

The datepicker is tied to a standard form input field. Click on the input to open an interactive calendar in a small overlay. If a date is chosen, feedback is shown as the input's value.

Default Functionality

Source Code

    <input type="text" class="form-control fc-datepicker" placeholder="MM/DD/YYYY">

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

Source Code

    $('#datepickerNoOfMonths').datepicker({
      showOtherMonths: true,
      selectOtherMonths: true,
      numberOfMonths: 2
    });

Display the datepicker embedded in the page instead of in an overlay.

Source Code

    <div class="fc-datepicker"></div>

###### Time Picker

Easily select a time for a text input using your mouse or keyboards arrow keys.

Default Time Picker:
Set the scroll position to local time if no value selected:
Dynamically set the time using a Javascript Date object:

Source Code

    <input id="tpBasic" type="text" class="form-control" placeholder="Set time">

Javascript Code

    $('#tpBasic').timepicker();

###### Color Picker

A simple component to select color in the same way you select color in Adobe Photoshop.

Javascript Code

    $('#colorpicker').spectrum({
      color: '#17A2B8'
    });

You can allow alpha transparency selection. Check out these example.

Javascript Code

    $('#showAlpha').spectrum({
      color: 'rgba(23,162,184,0.5)',
      showAlpha: true
    });

Show pallete only. If you'd like, spectrum can show the palettes you specify, and nothing else.

Javascript Code

    $('#showPaletteOnly').spectrum({
      showPaletteOnly: true,
      showPalette:true,
      color: '#DC3545',
      palette: [
        ['#1D2939', '#FFF', '#0866C6','#23BF08', '#F49917'],
        ['#DC3545', '#17A2B8', '#6610F2', '#fa1e81', '#72e7a6']
      ]
    });

###### Range Slider

Simple, small and fast javascript/jquery slider element.

HTML Code

    <input type="text" id="rangeslider1" name="example_name" value="" />

Javascript Code

    $('#rangeslider1').ionRangeSlider();