<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 ----------> <div class="container hotel-services"> <div class="row"> <h4>How would you rate your stay?</h4> <div class="[ form-group one-row ]"> <input type="checkbox" name="star1" id="star1" autocomplete="off" /> <div class="[ btn-group ]"> <label for="star1" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-star ]"></span> <span> </span> </label> </div> </div> <div class="[ form-group one-row ]"> <input type="checkbox" name="star2" id="star2" autocomplete="off" /> <div class="[ btn-group ]"> <label for="star2" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-star ]"></span> <span> </span> </label> </div> </div> <div class="[ form-group one-row ]"> <input type="checkbox" name="star3" id="star3" autocomplete="off" /> <div class="[ btn-group ]"> <label for="star3" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-star ]"></span> <span> </span> </label> </div> </div> <div class="[ form-group one-row ]"> <input type="checkbox" name="star4" id="star4" autocomplete="off" /> <div class="[ btn-group ]"> <label for="star4" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-star ]"></span> <span> </span> </label> </div> </div> <div class="[ form-group one-row ]"> <input type="checkbox" name="star5" id="star5" autocomplete="off" /> <div class="[ btn-group ]"> <label for="star5" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-star ]"></span> <span> </span> </label> </div> </div> <hr /> </div> </div> <!-- <div class="container hotel-rate1 "> <div class="row"> <h3>How would you rate your stay?</h3> </div> <div class="row"> <div class="col-sm-1"> <div class="round round-lg hollow red"> 1 awful </div> </div> <div class="col-sm-1"> <div class="round round-lg hollow red"> 2 bad </div> </div> <div class="col-sm-1"> <div class="round round-lg hollow "> 3 OK </div> </div> <div class="col-sm-1"> <div class="round round-lg hollow green"> 4 good </div> </div> <div class="col-sm-1"> <div class="round round-lg hollow green"> 5 great </div> </div> </div> <!-- <div class="row"> <div class="col-sm-1"> <div class="round round-lg" style="background-color:#99002F"> 1 </div> </div> <div class="col-sm-1"> <div class="round round-lg" style="background-color:#FFA200"> 2 </div> </div> <div class="col-sm-1"> <div class="round round-lg" style="background-color:#210094"> 3 </div> </div> <div class="col-sm-1"> <div class="round round-lg" style="background-color:#459C05"> 4 </div> </div> <div class="col-sm-1"> <div class="round round-lg" style="background-color:#008A4A"> 5 </div> </div> </div> </div> --> <!-- <div class="container hotel-rating" > <div class="row"> <h3>How would you rate your stay?</h3> </div> <div class="row"> <a class="btn icon-btn btn-danger" href="#"><span class="glyphicon btn-glyphicon glyphicon-minus img-circle text-danger"></span>1 - Bad</a> <a class="btn icon-btn btn-warning" href="#"><span class="glyphicon btn-glyphicon glyphicon-minus img-circle text-warning"></span>2</a> <a class="btn icon-btn btn-info" href="#"><span class="glyphicon btn-glyphicon glyphicon-unchecked img-circle text-info"></span>3</a> <a class="btn icon-btn btn-success" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span>4</a> <a class="btn icon-btn btn-primary" style="background-color:#459C05" href="#"><span class="glyphicon btn-glyphicon glyphicon-plus img-circle" style="color:#459C05"></span>5 - Great</a> </div> <div class="row"> <a class="btn icon-btn btn-danger" href="#"><span class="glyphicon btn-glyphicon img-circle text-danger">1</span>Bad</a> <a class="btn icon-btn btn-warning" href="#"><span class="glyphicon btn-glyphicon img-circle text-warning">3</span>2</a> <a class="btn icon-btn btn-info" href="#"><span class="glyphicon btn-glyphicon img-circle text-info">3</span>3</a> <a class="btn icon-btn btn-success" href="#"><span class="glyphicon btn-glyphicon img-circle text-success">4</span>4</a> <a class="btn icon-btn btn-primary" style="background-color:#459C05" href="#"><span class="glyphicon btn-glyphicon img-circle" style="color:#459C05">5</span>5 - Great</a> </div> </div> --> <div class="container hotel-services"> <div class="row"> <h4>What did you like more (<span class="[ glyphicon glyphicon-thumbs-up ]"></span>) or less (<span class="[ glyphicon glyphicon-thumbs-down ]"></span>)?</h4> <div class="[ form-group ]"> <input type="checkbox" name="opt1" id="opt1" autocomplete="off" /> <div class="[ btn-group ]"> <label for="opt1" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-thumbs-up ]"></span> <span> </span> </label> <label for="opt1" class="[ btn btn-default ]"> Cleanliness </label> <label for="opt2" class="[ btn btn-default ]"> <span> </span> <span class="[ glyphicon glyphicon-thumbs-down ]"></span> </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="opt2" id="opt2" autocomplete="off" /> <div class="[ btn-group ]"> <label for="opt2" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-thumbs-up ]"></span> <span> </span> </label> <label for="opt2" class="[ btn btn-default ]"> Rooms </label> <label for="opt2" class="[ btn btn-default ]"> <span> </span> <span class="[ glyphicon glyphicon-thumbs-down ]"></span> </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="opt3" id="opt3" autocomplete="off" /> <div class="[ btn-group ]"> <label for="opt3" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-thumbs-up ]"></span> <span> </span> </label> <label for="opt3" class="[ btn btn-default ]"> Service </label> <label for="opt3" class="[ btn btn-default ]"> <span> </span> <span class="[ glyphicon glyphicon-thumbs-down ]"></span> </label> </div> </div> <div class="[ form-group ]"> <input type="checkbox" name="opt4" id="opt4" autocomplete="off" /> <div class="[ btn-group ]"> <label for="opt4" class="[ btn btn-default label-plus ]"> <span class="[ glyphicon glyphicon-thumbs-up ]"></span> <span> </span> </label> <label for="opt4" class="[ btn btn-default ]"> Value </label> <label for="opt4" class="[ btn btn-default ]"> <span> </span> <span class="[ glyphicon glyphicon-thumbs-down ]"></span> </label> </div> </div> </div> </div>

/* .hotel-rate1 .row { margin-top: 30px; } .hotel-rate1 .round { display: inline-block; height: 30px; width: 30px; line-height: 30px; -moz-border-radius: 15px; border-radius: 15px; background-color: #222; color: #FFF; text-align: center; } .hotel-rate1 .round.hollow { display: inline-block; height: 30px; width: 30px; line-height: 30px; -moz-border-radius: 15px; border-radius: 15px; background-color: #FFF; color: #222; text-align: center; -webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75); } .hotel-rate1 .round.round-sm { height: 20px; width: 20px; line-height: 20px; -moz-border-radius: 10px; border-radius: 10px; font-size: 0.7em; } .hotel-rate1 .round.round-lg { height: 40px; width: 40px; line-height: 40px; -moz-border-radius: 20px; border-radius: 20px; font-size: 1.5em; } .hotel-rate1 .round.blue { background-color: #3EA6CE; } .hotel-rate1 .round.red { background-color: #d9534f; } .hotel-rate1 .round.green { background-color: #42A129; } .hotel-rate1 .round.hollow.blue { color: #3EA6CE; background-color: #FFF; -webkit-box-shadow: 0px 0px 0px 3px #3EA6CE; -moz-box-shadow: 0px 0px 0px 3px #3EA6CE; box-shadow: 0px 0px 0px 3px #3EA6CE; } .hotel-rate1 .round.hollow.red { color: #d9534f; background-color: #FFF; -webkit-box-shadow: 0px 0px 0px 3px #d9534f; -moz-box-shadow: 0px 0px 0px 3px #d9534f; box-shadow: 0px 0px 0px 3px #d9534f; } .hotel-rate1 .round.hollow.green { color: #42A129; background-color: #FFF; -webkit-box-shadow: 0px 0px 0px 3px #42A129; -moz-box-shadow: 0px 0px 0px 3px #42A129; box-shadow: 0px 0px 0px 3px #42A129; } */ /* http://bootsnipp.com/snippets/featured/attractive-round-cornered-button-with-icons */ .hotel-rating .btn-glyphicon { padding:8px; background:#ffffff; margin-right:4px; } .hotel-rating .icon-btn { padding: 1px 15px 3px 2px; border-radius:50px;} .hotel-services { margin-left:20px; } /* http://bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes */ .hotel-services .one-row { display: inline !important; } .hotel-services .form-group input[type="checkbox"] { display: none; } .hotel-services .form-group input[type="checkbox"] + .btn-group > label span { width: 20px; } .hotel-services .form-group input[type="checkbox"] + .btn-group > label span:first-child { display: none; } .hotel-services .form-group input[type="checkbox"] + .btn-group > label span:last-child { display: inline-block; } .hotel-services .form-group input[type="checkbox"]:checked + .btn-group > label span:first-child { display: inline-block; } .hotel-services .form-group input[type="checkbox"]:checked + .btn-group > label span:last-child { display: none; } .hotel-services .form-group input[type="checkbox"]:checked + .btn-group .label-plus { background-color: #42A129; color: #fff; }