Update html templates to use bootstrap for styling

1 files changed, 9 insertions, 11 deletions

diff --git a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
index cc7c92e..5cf9dfd 100644
--- a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
+++ b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-01.html
@@ -21,13 +21,14 @@
 
   {{flash_all_messages()}}
 
-  <fieldset>
-    <legend>file upload</legend>
-    <label for="file-rqtl2-bundle">R/qtl2 bundle</label>
+  <div form-group>
+    <legend class="heading">file upload</legend>
+    <label for="file-rqtl2-bundle" class="form-label">R/qtl2 bundle</label>
     <input type="file" id="file-rqtl2-bundle" name="rqtl2_bundle_file"
 	   accept="application/zip, .zip"
-	   required="required" />
-    <span class="form-input-help"><p>Provide a valid R/qtl2 zip file here. In
+	   required="required"
+           class="form-control" />
+    <span class="form-text text-muted"><p>Provide a valid R/qtl2 zip file here. In
       particular, ensure your zip bundle contains exactly one control file and
       the corresponding files mentioned in the control file.</p>
       <p>The control file can be either a YAML or JSON file. <em>ALL</em> other
@@ -36,12 +37,9 @@
 	<a href="https://kbroman.org/qtl2/assets/vignettes/input_files.html"
 	   target="_blank">
 	  R/qtl2 file format specifications</a> for more details.</p></span>
-  </fieldset>
-  <fieldset>
-    <input type="submit"
-	   value="upload R/qtl2 bundle"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+  </div>
+
+  <button type="submit" class="btn btn-primary">upload R/qtl2 bundle</button>
 </form>
 
 {%endblock%}