<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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"> <div class="row"> <div class="col-md-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="glyphicon glyphicon-arrow-right"></span>How is My Site? <a href="http://www.jquery2dotnet.com" target="_blank"><span class="glyphicon glyphicon-new-window"></span></a> </h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <div class="radio"> <label> <input type="radio" name="optionsRadios"> Good </label> </div> </li> <li class="list-group-item"> <div class="radio"> <label> <input type="radio" name="optionsRadios"> Excellent </label> </div> </li> <li class="list-group-item"> <div class="radio"> <label> <input type="radio" name="optionsRadios"> Bed </label> </div> </li> <li class="list-group-item"> <div class="radio"> <label> <input type="radio" name="optionsRadios"> Can Be Improved </label> </div> </li> <li class="list-group-item"> <div class="radio"> <label> <input type="radio" name="optionsRadios"> No Comment </label> </div> </li> </ul> </div> <div class="panel-footer"> <button type="button" class="btn btn-primary btn-sm"> Vote</button> <a href="#">Next</a></div> </div> </div> <div class="col-md-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="glyphicon glyphicon-hand-right"></span>Where do you get your news?</h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> Internet </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> Television </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> Radio </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> Newspaper </label> </div> </li> <li class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" value=""> Others </label> </div> </li> </ul> </div> <div class="panel-footer text-center"> <button type="button" class="btn btn-primary btn-block btn-sm"> Vote</button> <a href="#" class="small">Next</a></div> </div> </div> <div class="col-md-6"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"> <span class="glyphicon glyphicon-hand-right"></span> <span class="badge badge-info">8</span> <pre>Which among the following statements regarding the Surrogacy (Regulation) bill, 2016 is incorrect ? a. It allows only Indian citizens for Surrogacy in India b. The bill allows both gestational and traditional Surrogacy c. Any woman in the age range of 25 to 35 years of age is allowed to undertake surrogacy d. Surrogacy boards will decide code of conduct for Surrogacy in India </pre> </h3> </div> <div class="panel-body two-col"> <div class="row"> <div class="col-md-6"> <div class="well well-sm"> <div class="checkbox"> <label> <input type="checkbox" value=""> Internet </label> </div> </div> </div> <div class="col-md-6"> <div class="well well-sm"> <div class="checkbox"> <label> <input type="checkbox" value=""> Television </label> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="well well-sm margin-bottom-none"> <div class="checkbox"> <label> <input type="checkbox" value=""> Radio </label> </div> </div> </div> <div class="col-md-6"> <div class="well well-sm margin-bottom-none"> <div class="checkbox"> <label> <input type="checkbox" value=""> Newspaper </label> </div> </div> </div> </div> </div> <div class="panel-footer"> <button type="button" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-ok"></span>Vote</button> <button type="button" class="pull-right btn btn-primary btn-sm"> Next</button> <div> <ul class="pagination pagination-sm pull-right"> <li class="disabled"><a href="javascript:void(0)">«</a></li> <li class="active"><a href="javascript:void(0)">1 <span class="sr-only">(current)</span></a></li> <li><a href="http://www.jquery2dotnet.com">2</a></li> <li><a href="http://www.jquery2dotnet.com">3</a></li> <li><a href="http://www.jquery2dotnet.com">4</a></li> <li><a href="http://www.jquery2dotnet.com">5</a></li> <li><a href="javascript:void(0)">»</a></li> </ul> </div> </div> </div> </div> </div> </div>

body { margin-top:20px; } .panel-body:not(.two-col) { padding:0px } .glyphicon { margin-right:5px; } .glyphicon-new-window { margin-left:5px; } .panel-body .radio,.panel-body .checkbox {margin-top: 0px;margin-bottom: 0px;} .panel-body .list-group {margin-bottom: 0;} .margin-bottom-none { margin-bottom: 0; } .panel-body .radio label,.panel-body .checkbox label { display:block; }