<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <ul class="chec-radio"> <li class="pz"> <label class="radio-inline"> <input type="checkbox" id="pro-chx-residential" name="gas_availability" class="pro-chx" value="yes" checked> <div class="clab">Gas Availability</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="checkbox" id="pro-chx-residential" name="electricity_availability" class="pro-chx" value="yes"> <div class="clab">Electric Availability</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="checkbox" id="pro-chx-residential" name="phone_internet" class="pro-chx" value="yes"> <div class="clab">Phone and Internet</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="checkbox" id="pro-chx-residential" name="water_availability" class="pro-chx" value="yes"> <div class="clab">Water Availability</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="checkbox" id="pro-chx-residential" name="sanitation" class="pro-chx" value="yes"> <div class="clab">Sanitation</div> </label> </li> </ul> <ul class="chec-radio"> <li class="pz"> <label class="radio-inline"> <input type="radio" checked="" id="pro-chx-residential" name="property_type" class="pro-chx" value="constructed"> <div class="clab">Constructed</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="radio" id="pro-chx-commercial" name="property_type" class="pro-chx" value="unconstructed" checked> <div class="clab">Un Constructed</div> </label> </li> <li class="pz"> <label class="radio-inline"> <input type="radio" id="pro-chx-open" name="property_type" class="pro-chx" value="open_land"> <div class="clab">Open Land</div> </label> </li> </ul>

ul.chec-radio { margin: 15px; } ul.chec-radio li.pz { display: inline; } .chec-radio label.radio-inline input[type="checkbox"] { display: none; } .chec-radio label.radio-inline input[type="checkbox"]:checked+div { color: #fff; background-color: #000; } .chec-radio .radio-inline .clab { cursor: pointer; background: #e7e7e7; padding: 7px 20px; text-align: center; text-transform: uppercase; color: #333; position: relative; height: 34px; float: left; margin: 0; margin-bottom: 5px; } .chec-radio label.radio-inline input[type="checkbox"]:checked+div:before { content: "\e013"; margin-right: 5px; font-family: 'Glyphicons Halflings'; } .chec-radio label.radio-inline input[type="radio"] { display: none; } .chec-radio label.radio-inline input[type="radio"]:checked+div { color: #fff; background-color: #000; } .chec-radio label.radio-inline input[type="radio"]:checked+div:before { content: "\e013"; margin-right: 5px; font-family: 'Glyphicons Halflings'; }