<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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="container"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend class="col-form-title">Entry Details</legend> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="year-of-entry">Year of Entry</label> <div class="col-md-4"> <select id="year-of-entry" name="year-of-entry" class="form-control"> <option value="2025">2025</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="entry-year-level">Year of Entry</label> <div class="col-md-4"> <select id="entry-year-level" name="entry-year-level" class="form-control"> <option value="8">Year 8</option> </select> </div> </div> <!-- Multiple Radios --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="entry-term">Entry Term</label> <div class="col-md-4"> <div class="radio"> <label class="radio-inline" for="entry-term-0"> <input type="radio" name="entry-term" id="entry-term-0" value="1" checked="checked"> Term 1 </label> <label for="entry-term-1"> <input type="radio" name="entry-term" id="entry-term-1" value="2"> Term 2 </label> </div> <div class="radio"> <label for="entry-term-2"> <input type="radio" name="entry-term" id="entry-term-2" value="3"> Term 3 </label> <label for="entry-term-3"> <input type="radio" name="entry-term" id="entry-term-3" value="4"> Term 4 </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="entry-term"></label> <div class="col-md-4"> <div class="radio"> <label class="radio-inline" for="entry-term-0"> <input type="radio" name="entry-term" id="entry-term-0" value="1" checked="checked"> Day Student </label> <label for="entry-term-1"> <input type="radio" name="entry-term" id="entry-term-1" value="2"> Boarder </label> </div> </div> </div> <!-- Button --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="next"></label> <div class="col-md-4"> <button id="back" name="back" class="btn btn-secondary">Back</button> <button id="next" name="next" class="btn btn-primary">Save & Continue</button> </div> </div> </fieldset> </form> </div>

.col-form-label { color: #2A4A8D; font-family: Lato,"helvetica neue",sans-serif; } .col-form-title { color: #2A4A8D; font-family: Lato,"helvetica neue",sans-serif; font-weight: 400; font-variant: small-caps; } .radio label { padding-right: 30px; }