<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">Residency Details</legend> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="year-of-entry">Country of Birth</label> <div class="col-md-4"> <select id="year-of-entry" name="year-of-entry" class="form-control"> <option value="AUS">Australia</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group row"> <label class="col-md-4 col-form-label" for="entry-year-level">Language spoken at home</label> <div class="col-md-4"> <select id="entry-year-level" name="entry-year-level" class="form-control"> <option value="ENG">English</option> </select> </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; }