<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Edit event</legend> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">Gender</label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-inverse">Boys</button> <button id="button2id" name="button2id" class="btn btn-success">Girls</button> <button id="button1id" name="button1id" class="btn btn-inverse">Mixed</button> <button id="button1id" name="button1id" class="btn btn-inverse">Any</button> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">Age</label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-success">9</button> <button id="button2id" name="button2id" class="btn btn-inverse">10</button> <button id="button2id" name="button2id" class="btn btn-inverse">11</button> <button id="button2id" name="button2id" class="btn btn-inverse">12</button> <button id="button2id" name="button2id" class="btn btn-inverse">13</button> <button id="button2id" name="button2id" class="btn btn-inverse">14</button> <button id="button2id" name="button2id" class="btn btn-inverse">15</button> <button id="button2id" name="button2id" class="btn btn-inverse">16</button> <button id="button2id" name="button2id" class="btn btn-inverse">17</button> <button id="button2id" name="button2id" class="btn btn-inverse">18</button> <button id="button2id" name="button2id" class="btn btn-inverse">19</button> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">Dive height</label> <div class="col-md-8"> <button id="button2id" name="button2id" class="btn btn-inverse"><span class="glyphicon glyphicon-unchecked"></span> 5M</button> <button id="button2id" name="button2id" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> 7.5M</button> <button id="button2id" name="button2id" class="btn btn-success"><span class="glyphicon glyphicon-check"></span> 10M</button> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Judge schema</label> <div class="col-md-4"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">2 Judges</option> <option value="2">3 Judges</option> <option value="3">5 Judges drop Hi/Lo</option> <option value="4">7 Judges drop 2Hi/2Lo</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput"># dives</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="6" class="form-control input-md" required=""> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id">Bracket</label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-inverse">Semi-final</button> <button id="button2id" name="button2id" class="btn btn-success">Final</button> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="textinput"># voluntaries</label> <div class="col-md-4"> <input id="textinput" name="textinput" type="text" placeholder="1" class="form-control input-md"> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id"></label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-inverse">Novice</button> <button id="button2id" name="button2id" class="btn btn-inverse">Synchro</button> </div> </div> <br /> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="eventfmt">Event format</label> <div class="col-md-4"> <select id="eventfmt" name="eventfmt" class="form-control"> <option value="6-6o">6 dives</option> <option value="6-1v-5o">6 dives 1 vol. 5 opt.</option> <option value="10-5v-5o">10 dives 5 vol. 5 opt.</option> <option value="11-5v-6o">11 dives 5 vol. 6 opt.</option> <option value="custom">Custom...</option> </select> </div> </div> <br /> <br /> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="ruleset">Rules</label> <div class="col-md-4"> <select id="ruleset" name="ruleset" class="form-control"> <option value="1">First dive Forward</option> <option value="2">First dive Backward</option> <option value="3">First dive Reverse</option> <option value="4">First dive Inward</option> <option value="5">First dive Twist</option> </select> </div> </div> <br /> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="ruleset11">Rules</label> <div class="col-md-4"> <select id="ruleset11" name="ruleset11" class="form-control"> <option value="1">Voluntaries first 9.0</option> <option value="2">Voluntaries last 9.0</option> </select> </div> </div> <br /> </fieldset> </form>