Input and Dropdown

.checkboxes-new-styling this class must be used

Checkboxes

Option one is this and that—be sure to include why it's great

       
        <div class="checkboxes-new-styling">
         <input type="checkbox" id="c3" name="c3" />
         <label for="c3"><span></span>  Option one is this and that—be sure to include why it's great </label>
        </div>

CSS Code

       
         
.checkboxes-new-styling input[type="checkbox"] {
    display:none;
}

.checkboxes-new-styling input[type="checkbox"] + label {
    font-weight: 400;
}

.checkboxes-new-styling input[type="checkbox"] + label span {
    display:inline-block;
    width:28px;
    height:28px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(images/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

.checkboxes-new-styling input[type="checkbox"] + label span:hover {
   width:28px;
    height:28px;
    background:url(images/check_radio_sheet-hover.png) left top no-repeat;
}

.checkboxes-new-styling input[type="checkbox"]:checked + label span {
    background:url(images/check_radio_sheet.png) -28px top no-repeat;
}

Forms elements

Document Name

       
  <div class="form-group">
     <label class="col-sm-4 control-label">Document Name</label>
     <div class="col-sm-8"><input type="text" class="form-control"></div>
                </div>

Select

       
  
    <div class="form-group"><label class="col-sm-4 control-label">Select</label>

                    <div class="col-sm-8"><select class="form-control m-b" name="account">
                        <option>option 1</option>
                        <option>option 2</option>
                        <option>option 3</option>
                        <option>option 4</option>
                    </select>
                    </div>
                </div>

Table Grid

when you click #allcheck - All checkboxes will checked

#All Check	Completed	Task	Date
Check Box 1	Zender Company	20%	Jul 14, 2013
Check Box 1	Zender Company	20%	Jul 14, 2013
Check Box 1	Zender Company	20%	Jul 14, 2013

Java Script for grid to all checked

        
         $(document).ready(function () {
   
          $( "#checkAll" ).click(function() {
           alert('I am owais');
           $('label div.icheckbox_square-green').toggleClass( "hover checked" );
           $('input:checkbox').not(this).prop('checked', this.checked);
          });

         });

Normal Grid

	Completed	Task	Date
All Check	Zender Company	20%	Jul 14, 2013
All Check	Zender Company	20%	Jul 14, 2013
All Check	Zender Company	20%	Jul 14, 2013

Standard Button Format

for a href=""

    
     <a class="btn btn-primary" href="#" title="Upload">Upload</a>

for button

    
     <button type="button" class="btn w-xs btn-default">Default</button>