Update html templates to use bootstrap for styling

33 files changed, 1268 insertions, 1210 deletions

diff --git a/qc_app/static/css/custom-bootstrap.css b/qc_app/static/css/custom-bootstrap.css
new file mode 100644
index 0000000..e5f6594
--- /dev/null
+++ b/qc_app/static/css/custom-bootstrap.css
@@ -0,0 +1,4 @@
+/** Customize some bootstrap selectors **/
+.btn {
+    text-transform: capitalize;
+}
diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
new file mode 100644
index 0000000..a88c229
--- /dev/null
+++ b/qc_app/static/css/styles.css
@@ -0,0 +1,7 @@
+.heading {
+    text-transform: capitalize;
+}
+
+label {
+    text-transform: capitalize;
+}
diff --git a/qc_app/templates/base.html b/qc_app/templates/base.html
index 00ff2d7..91faee8 100644
--- a/qc_app/templates/base.html
+++ b/qc_app/templates/base.html
@@ -14,6 +14,9 @@
     <link rel="shortcut icon" type="image/png" sizes="64x64"
 	  href="{{url_for('static', filename='images/CITGLogo.png')}}" />
 
+    <link rel="stylesheet" type="text/css" href="/static/css/custom-bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
+
     {%block css%}{%endblock%}
 
   </head>
diff --git a/qc_app/templates/continue_from_create_dataset.html b/qc_app/templates/continue_from_create_dataset.html
index f95f96f..03bb49c 100644
--- a/qc_app/templates/continue_from_create_dataset.html
+++ b/qc_app/templates/continue_from_create_dataset.html
@@ -20,7 +20,7 @@
 {%endif%}
 {%endwith%}
 
-<div class="two-column-with-separator">
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.final_confirmation')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col1">
@@ -29,15 +29,15 @@
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, datasetid=datasetid, totallines=totallines)}}
 
-    <fieldset>
-      <input type="submit"
-	     value="continue"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">continue</button>
   </form>
+</div>
 
+<div class="row">
   <p class="two-col-sep-separator">OR</p>
+</div>
 
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.select_dataset')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col2">
@@ -46,11 +46,7 @@
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, datasetid=datasetid, totallines=totallines)}}
 
-    <fieldset>
-      <input type="submit"
-	     value="go back"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">go back</button>
   </form>
 </div>
 {%endblock%}
diff --git a/qc_app/templates/continue_from_create_study.html b/qc_app/templates/continue_from_create_study.html
index 7455fbc..34e6e5e 100644
--- a/qc_app/templates/continue_from_create_study.html
+++ b/qc_app/templates/continue_from_create_study.html
@@ -20,7 +20,7 @@
 {%endif%}
 {%endwith%}
 
-<div class="two-column-with-separator">
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.select_dataset')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col1">
@@ -29,15 +29,15 @@
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
 
-    <fieldset>
-      <input type="submit"
-	     value="continue"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">continue</button>
   </form>
+</div>
 
+<div class="row">
   <p class="two-col-sep-separator">OR</p>
+</div>
 
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.select_study')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col2">
@@ -46,11 +46,7 @@
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
 
-    <fieldset>
-      <input type="submit"
-	     value="go back"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">go back</button>
   </form>
 </div>
 {%endblock%}
diff --git a/qc_app/templates/errors_display.html b/qc_app/templates/errors_display.html
index 0ee5e85..715cfcf 100644
--- a/qc_app/templates/errors_display.html
+++ b/qc_app/templates/errors_display.html
@@ -5,7 +5,7 @@
 {%else %}
 <p class="alert-danger">{{error_message}}</p>
 
-<table class="reports-table">
+<table class="table reports-table">
   <thead>
     <tr>
       <th>line number</th>
diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index 06d1e87..0d301f5 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -5,118 +5,130 @@
 {%block title%}Data Upload{%endblock%}
 
 {%block contents%}
-<h1 class="heading">data upload</h1>
-
-<div class="explainer">
-  <p>Each of the sections below gives you a different option for data upload.
-    Please read the documentation for each section carefully to understand what
-    each section is about.</p>
+<div class="row">
+  <h1 class="heading">data upload</h1>
+
+  <div class="explainer">
+    <p>Each of the sections below gives you a different option for data upload.
+      Please read the documentation for each section carefully to understand what
+      each section is about.</p>
+  </div>
 </div>
 
-<h2 class="heading">R/qtl2 Bundles</h2>
-
-<div class="explainer">
-  <p>This feature combines and extends the two upload methods below. Instead of
-    uploading one item at a time, the R/qtl2 bundle you upload can contain both
-    the genotypes data (samples/individuals/cases and their data) and the
-    expression data.</p>
-  <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
-    of the methods below can handle.</p>
-
-  <a href={{url_for("upload.rqtl2.select_species")}}
-     title="Upload a zip bundle of R/qtl2 files">
-    <button class="btn btn-primary">upload R/qtl2 bundle</button></a>
+<div class="row">
+  <h2 class="heading">R/qtl2 Bundles</h2>
+
+  <div class="explainer">
+    <p>This feature combines and extends the two upload methods below. Instead of
+      uploading one item at a time, the R/qtl2 bundle you upload can contain both
+      the genotypes data (samples/individuals/cases and their data) and the
+      expression data.</p>
+    <p>The R/qtl2 bundle, additionally, can contain extra metadata, that neither
+      of the methods below can handle.</p>
+
+    <a href={{url_for("upload.rqtl2.select_species")}}
+       title="Upload a zip bundle of R/qtl2 files">
+      <button class="btn btn-primary">upload R/qtl2 bundle</button></a>
+  </div>
 </div>
 
-<h2 class="heading">Expression Data</h2>
-
-<div class="explainer">
-  <p>This feature enables you to upload expression data. It expects the data to
-    be in <strong>tab-separated values (TSV)</strong> files. The data should be
-    a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
-    list of the <em>phenotypes</em> and the first row is a list of
-    <em>samples/cases</em>.</p>
-
-  <p>If you haven't done so please go to this page to learn the requirements for
-    file formats and helpful suggestions to enter your data in a fast and easy
-    way.</p>
-
-  <ol>
-    <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
-      with our system requirements. (
-      <a href="{{url_for('entry.data_review')}}#data-concerns"
-	 title="Details for the data expectations.">Help</a>
-      )</li>
-    <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
-      <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
-      files (<a href="{{url_for('entry.data_review')}}#file-types"
-	 title="Details for the data expectations.">Help</a>)</li>
-  </ol>
-</div>
 
-<form action="{{url_for('entry.upload_file')}}"
-      method="POST"
-      enctype="multipart/form-data"
-      id="frm-upload-expression-data">
-  <legend class="heading">upload expression data</legend>
-  {{flash_messages("error-expr-data")}}
-
-  <fieldset>
-    <label for="select_species01">Species</label>
-    <select id="select_species01"
-	    name="speciesid"
-	    required="required">
-      <option value="">Select species</option>
-      {%for aspecies in species%}
-      <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
-      {%endfor%}
-    </select>
-  </fieldset>
-
-  <fieldset>
-    <legend>file type</legend>
-
-    <input type="radio" name="filetype" value="average" id="filetype_average"
-	   required="required" class="form-col-1" />
-    <label for="filetype_average" class="form-col-2">average</label>
-
-    <input type="radio" name="filetype" value="standard-error"
-	   id="filetype_standard_error" required="required"
-	   class="form-col-1" />
-    <label for="filetype_standard_error" class="form-col-2">
-      standard error
-    </label>
-  </fieldset>
-
-  <fieldset>
-    <span id="no-file-error" class="alert-danger" style="display: none;">
-      No file selected
-    </span>
-    <label for="file_upload" class="form-col-1">select file</label>
-    <input type="file" name="qc_text_file" id="file_upload"
-	   accept="text/plain, text/tab-separated-values, application/zip"
-	   class="form-col-2"/>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit" value="upload file" class="btn btn-primary form-col-2" />
-  </fieldset>
+<div class="row">
+  <h2 class="heading">Expression Data</h2>
+
+  <div class="explainer">
+    <p>This feature enables you to upload expression data. It expects the data to
+      be in <strong>tab-separated values (TSV)</strong> files. The data should be
+      a simple matrix of <em>phenotype × sample</em>, i.e. The first column is a
+      list of the <em>phenotypes</em> and the first row is a list of
+      <em>samples/cases</em>.</p>
+
+    <p>If you haven't done so please go to this page to learn the requirements for
+      file formats and helpful suggestions to enter your data in a fast and easy
+      way.</p>
+
+    <ol>
+      <li><strong>PLEASE REVIEW YOUR DATA.</strong>Make sure your data complies
+        with our system requirements. (
+        <a href="{{url_for('entry.data_review')}}#data-concerns"
+	   title="Details for the data expectations.">Help</a>
+        )</li>
+      <li><strong>UPLOAD YOUR DATA FOR DATA VERIFICATION.</strong> We accept
+        <strong>.csv</strong>, <strong>.txt</strong> and <strong>.zip</strong>
+        files (<a href="{{url_for('entry.data_review')}}#file-types"
+	          title="Details for the data expectations.">Help</a>)</li>
+    </ol>
+  </div>
+
+  <form action="{{url_for('entry.upload_file')}}"
+        method="POST"
+        enctype="multipart/form-data"
+        id="frm-upload-expression-data">
+    <legend class="heading">upload expression data</legend>
+    {{flash_messages("error-expr-data")}}
+
+    <div class="form-group">
+      <label for="select_species01" class="form-label">Species</label>
+      <select id="select_species01"
+	      name="speciesid"
+	      required="required"
+              class="form-control">
+        <option value="">Select species</option>
+        {%for aspecies in species%}
+        <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
+        {%endfor%}
+      </select>
+    </div>
+
+    <div class="form-group">
+      <legend class="heading">file type</legend>
+
+      <div class="form-check">
+        <input type="radio" name="filetype" value="average" id="filetype_average"
+	       required="required" class="form-check-input" />
+        <label for="filetype_average" class="form-check-label">average</label>
+      </div>
+
+      <div class="form-check">
+        <input type="radio" name="filetype" value="standard-error"
+	       id="filetype_standard_error" required="required"
+	       class="form-check-input" />
+        <label for="filetype_standard_error" class="form-check-label">
+          standard error
+        </label>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <span id="no-file-error" class="alert-danger" style="display: none;">
+        No file selected
+      </span>
+      <label for="file_upload" class="form-label">select file</label>
+      <input type="file" name="qc_text_file" id="file_upload"
+	     accept="text/plain, text/tab-separated-values, application/zip"
+	     class="form-control"/>
+    </div>
+
+    <button type="submit" class="btn btn-primary" />upload file</button>
 </form>
 
 {{upload_progress_indicator()}}
+</div>
 
-<h2 class="heading">samples/cases</h2>
+<div class="row">
+  <h2 class="heading">samples/cases</h2>
 
-<div class="explainer">
-  <p>For the expression data above, you need the samples/cases in your file to
-    already exist in the GeneNetwork database. If there are any samples that do
-    not already exist the upload of the expression data will fail.</p>
-  <p>This section gives you the opportunity to upload any missing samples</p>
-</div>
+  <div class="explainer">
+    <p>For the expression data above, you need the samples/cases in your file to
+      already exist in the GeneNetwork database. If there are any samples that do
+      not already exist the upload of the expression data will fail.</p>
+    <p>This section gives you the opportunity to upload any missing samples</p>
+  </div>
 
-<a href={{url_for("samples.select_species")}}
-   title="Upload samples/cases/individuals for your data">
-  upload Samples/Cases</a>
+  <a href={{url_for("samples.select_species")}}
+     title="Upload samples/cases/individuals for your data"
+     class="btn btn-primary">upload Samples/Cases</a>
+</div>
 
 {%endblock%}
 
diff --git a/qc_app/templates/insert_error.html b/qc_app/templates/insert_error.html
index 56dd195..5301288 100644
--- a/qc_app/templates/insert_error.html
+++ b/qc_app/templates/insert_error.html
@@ -5,24 +5,28 @@
 {%block contents%}
 <h1 class="heading">Insertion Failure</h1>
 
-<p>
-  There was an error inserting data into the database
-</p>
+<div class="row">
+  <p>
+    There was an error inserting data into the database
+  </p>
 
-<p>
-  Please notify the developers of this issue when you encounter it,
-  providing the information below.
-</p>
+  <p>
+    Please notify the developers of this issue when you encounter it,
+    providing the information below.
+  </p>
 
-<h4>Debugging Information</h4>
+  <h4>Debugging Information</h4>
 
-<ul>
-  <li><strong>job id</strong>: {{job["job_id"]}}</li>
-</ul>
+  <ul>
+    <li><strong>job id</strong>: {{job["jobid"]}}</li>
+  </ul>
+</div>
 
-<h4>STDERR Output</h4>
-<div class="cli-output">
-  {{job["stderr"]}}
+<div class="row">
+  <h4>STDERR Output</h4>
+  <pre class="cli-output">
+    {{job["stderr"]}}
+  </pre>
 </div>
 
 {%endblock%}
diff --git a/qc_app/templates/insert_progress.html b/qc_app/templates/insert_progress.html
index 0e1a9e0..52177d6 100644
--- a/qc_app/templates/insert_progress.html
+++ b/qc_app/templates/insert_progress.html
@@ -10,8 +10,12 @@
 {%block contents%}
 <h1 class="heading">{{job_name}}</h1>
 
-<label for="job_status">status:</label>
-<span>{{job_status}}: {{message}}</span><br />
+<div class="row">
+  <form>
+    <div class="form-group">
+      <label for="job_status" class="form-label">status:</label>
+      <span class="form-text">{{job_status}}: {{message}}</span>
+    </div>
 
 {%if job.get("stdout", "").split("\n\n") | length < 3 %}
 {%set lines = 0%}
@@ -25,9 +29,16 @@
 {%set fraction = (lines/totallines)%}
 {%endif%}
 
-<label for="job_{{job_id}}">inserting: </label>
-<progress id="jobs_{{job_id}}" value="{{(fraction)}}">{{fraction*100}}</progress>
-<span>{{"%.2f" | format(fraction * 100 | float)}}%</span><br />
+    <div class="form-group">
+      <label for="job_{{job_id}}" class="form-label">inserting: </label>
+      <progress id="jobs_{{job_id}}"
+                value="{{(fraction)}}"
+                class="form-control">{{fraction*100}}</progress>
+      <span class="form-text text-muted">
+        {{"%.2f" | format(fraction * 100 | float)}}%</span>
+    </div>
+  </form>
+</div>
 
 
 {{stdout_output(job)}}
diff --git a/qc_app/templates/insert_success.html b/qc_app/templates/insert_success.html
index 4406c66..7e1fa8d 100644
--- a/qc_app/templates/insert_success.html
+++ b/qc_app/templates/insert_success.html
@@ -6,10 +6,14 @@
 {%block contents%}
 <h1 class="heading">Insertion Success</h1>
 
+<div class="row">
 <p>Data inserted successfully!</p>
 
 <p>The following queries were run:</p>
+</div>
 
-{{stdout_output(job)}}
+<div class="row">
+  {{stdout_output(job)}}
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/job_progress.html b/qc_app/templates/job_progress.html
index 1b08814..1af0763 100644
--- a/qc_app/templates/job_progress.html
+++ b/qc_app/templates/job_progress.html
@@ -10,21 +10,30 @@
 {%block contents%}
 <h1 class="heading">{{job_name}}</h2>
 
-<label for="job_status">status:</label>
-<span>{{job_status}}: {{message}}</span><br />
-
-<label for="job_{{job_id}}">parsing: </label>
-<progress id="job_{{job_id}}" value="{{progress/100}}">{{progress}}</progress>
-<span>{{"%.2f" | format(progress)}}%</span>
-
-<div>
+<div class="row">
   <form action="{{url_for('parse.abort')}}" method="POST">
+    <legend class="heading">Status</legend>
+    <div class="form-group">
+      <label for="job_status" class="form-label">status:</label>
+      <span class="form-text">{{job_status}}: {{message}}</span><br />
+    </div>
+
+    <div class="form-group">
+      <label for="job_{{job_id}}" class="form-label">parsing: </label>
+      <progress id="job_{{job_id}}"
+                value="{{progress/100}}"
+                class="form-control">
+        {{progress}}</progress>
+      <span class="form-text text-muted">{{"%.2f" | format(progress)}}%</span>
+    </div>
+
     <input type="hidden" name="job_id" value="{{job_id}}" />
-    <input type="submit" value="Abort" class="btn btn-danger" />
+
+    <button type="submit" class="btn btn-danger">Abort</button>
   </form>
 </div>
 
-<div>
+<div class="row">
   {{errors_display(errors, "No errors found so far", "We have found the following errors so far", False)}}
 </div>
 
diff --git a/qc_app/templates/rqtl2/create-geno-dataset-success.html b/qc_app/templates/rqtl2/create-geno-dataset-success.html
index 4333612..1b50221 100644
--- a/qc_app/templates/rqtl2/create-geno-dataset-success.html
+++ b/qc_app/templates/rqtl2/create-geno-dataset-success.html
@@ -31,27 +31,25 @@
   </p>
 </div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">select from existing genotype datasets</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id"
-	 value="{{geno_dataset.id}}" />
-
-  <fieldset>
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">select from existing genotype datasets</legend>
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id"
+	   value="{{geno_dataset.id}}" />
+
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/create-probe-dataset-success.html b/qc_app/templates/rqtl2/create-probe-dataset-success.html
index 57df449..790d174 100644
--- a/qc_app/templates/rqtl2/create-probe-dataset-success.html
+++ b/qc_app/templates/rqtl2/create-probe-dataset-success.html
@@ -6,7 +6,7 @@
 {%block contents%}
 <h2 class="heading">Create ProbeSet Dataset</h2>
 
-<div class="explainer">
+<div class="row">
   <p>You successfully created the ProbeSet dataset with the following
     information.
     <dl>
@@ -34,28 +34,26 @@
   </p>
 </div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">Create ProbeSet dataset</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{study.Id}}" />
-  <input type="hidden" name="probe-dataset-id" value="{{dataset.datasetid}}" />
-
-  <fieldset>
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">Create ProbeSet dataset</legend>
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{study.Id}}" />
+    <input type="hidden" name="probe-dataset-id" value="{{dataset.datasetid}}" />
+
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/create-probe-study-success.html b/qc_app/templates/rqtl2/create-probe-study-success.html
index 5d3d123..d0ee508 100644
--- a/qc_app/templates/rqtl2/create-probe-study-success.html
+++ b/qc_app/templates/rqtl2/create-probe-study-success.html
@@ -6,7 +6,7 @@
 {%block contents%}
 <h2 class="heading">Create ProbeSet Study</h2>
 
-<div class="explainer">
+<div class="row">
   <p>You successfully created the ProbeSet study with the following
     information.
     <dl>
@@ -26,28 +26,24 @@
       <dd>{{study.today}}</dd>
     </dl>
   </p>
-</div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">Create ProbeSet study</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{study.studyid}}" />
-
-  <fieldset>
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">Create ProbeSet study</legend>
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{study.studyid}}" />
+
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/create-tissue-success.html b/qc_app/templates/rqtl2/create-tissue-success.html
index 7ea0c65..5f2c5a0 100644
--- a/qc_app/templates/rqtl2/create-tissue-success.html
+++ b/qc_app/templates/rqtl2/create-tissue-success.html
@@ -6,61 +6,18 @@
 {%block contents%}
 <h2 class="heading">Select Tissue</h2>
 
-<div class="explainer">
+<div class="row">
   <p>You have successfully added a new tissue, organ or biological material with
     the following details:</p>
 </div>
 
-{{flash_all_messages()}}
-
-<form id="frm-create-tissue-display"
-      method="POST"
-      action="#">
-  <legend class="heading">Create Tissue</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-
-  <fieldset>
-    <label>Name</label>
-    <label>{{tissue.TissueName}}</label>
-  </fieldset>
-
-  <fieldset>
-    <label>Short Name</label>
-    <label>{{tissue.Short_Name}}</label>
-  </fieldset>
-
-  {%if tissue.BIRN_lex_ID%}
-  <fieldset>
-    <label>BIRN Lex ID</label>
-    <label>{{tissue.BIRN_lex_ID}}</label>
-  </fieldset>
-  {%endif%}
-
-  {%if tissue.BIRN_lex_Name%}
-  <fieldset>
-    <label>BIRN Lex Name</label>
-    <label>{{tissue.BIRN_lex_Name}}</label>
-  </fieldset>
-  {%endif%}
-</form>
-
-<div id="action-buttons"
-     style="width:65ch;display:inline-grid;column-gap:5px;">
-
-  <form id="frm-create-tissue-success-continue"
+<div class="row">
+  {{flash_all_messages()}}
+
+  <form id="frm-create-tissue-display"
         method="POST"
-        action="{{url_for('upload.rqtl2.select_dataset_info',
-	        species_id=species.SpeciesId,
-	        population_id=population.InbredSetId)}}"
-        style="display: inline; width: 100%; grid-column: 1 / 2;
-               padding-top: 0.5em; text-align: center; border: none;
-               background-color: inherit;">
+        action="#">
+    <legend class="heading">Create Tissue</legend>
 
     <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
     <input type="hidden" name="population_id"
@@ -69,16 +26,63 @@
     <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
     <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
 
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
+    <div class="form-group">
+      <label>Name</label>
+      <label>{{tissue.TissueName}}</label>
+    </div>
+
+    <div class="form-group">
+      <label>Short Name</label>
+      <label>{{tissue.Short_Name}}</label>
+    </div>
+
+    {%if tissue.BIRN_lex_ID%}
+    <div class="form-group">
+      <label>BIRN Lex ID</label>
+      <label>{{tissue.BIRN_lex_ID}}</label>
+    </div>
+    {%endif%}
+
+    {%if tissue.BIRN_lex_Name%}
+    <div class="form-group">
+      <label>BIRN Lex Name</label>
+      <label>{{tissue.BIRN_lex_Name}}</label>
+    </div>
+    {%endif%}
   </form>
 
+  <div id="action-buttons"
+       style="width:65ch;display:inline-grid;column-gap:5px;">
+
+    <form id="frm-create-tissue-success-continue"
+          method="POST"
+          action="{{url_for('upload.rqtl2.select_dataset_info',
+	          species_id=species.SpeciesId,
+	          population_id=population.InbredSetId)}}"
+          style="display: inline; width: 100%; grid-column: 1 / 2;
+                 padding-top: 0.5em; text-align: center; border: none;
+                 background-color: inherit;">
+
+      <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+      <input type="hidden" name="population_id"
+	     value="{{population.InbredSetId}}" />
+      <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
+      <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+      <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+
+      <button type="submit" class="btn btn-primary">continue</button>
+    </form>
+  </div>
+</div>
+
+<div class="row">
   <p style="display:inline;width:100%;grid-column:2/3;text-align:center;
             color:#336699;font-weight:bold;">
     OR
   </p>
+</div>
 
+<div class="row">
   <form id="frm-create-tissue-success-select-existing"
         method="POST"
         action="{{url_for('upload.rqtl2.select_tissue',
@@ -94,11 +98,9 @@
     <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
     <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
 
-    <input type="submit"
-	   value="select from existing tissues"
-	   class="btn btn-primary form-col-2" />
+    <button type="submit" class="btn btn-primary">
+      select from existing tissues</button>
   </form>
-
 </div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/index.html b/qc_app/templates/rqtl2/index.html
index 45018e7..f3329c2 100644
--- a/qc_app/templates/rqtl2/index.html
+++ b/qc_app/templates/rqtl2/index.html
@@ -12,23 +12,25 @@
       id="frm-rqtl2-upload">
   <legend class="heading">upload R/qtl2 bundle</legend>
   {{flash_messages("error-rqtl2")}}
-  <fieldset>
-    <label for="select:species">Species</label>
-    <select id="select:species" name="species_id" required="required">
+
+  <div class="form-group">
+    <label for="select:species" class="form-label">Species</label>
+    <select id="select:species"
+            name="species_id"
+            required="required"
+            class="form-control">
       <option value="">Select species</option>
       {%for spec in species%}
       <option value="{{spec.SpeciesId}}">{{spec.MenuName}}</option>
       {%endfor%}
     </select>
-    <span class="form-input-help">
+    <small class="form-text text-muted">
       Data that you upload to the system should belong to a know species.
       Here you can select the species that you wish to upload data for.
-    </span>
-  </fieldset>
+    </small>
+  </div>
 
-  <fieldset>
-    <input type="submit" value="submit" class="btn btn-primary form-col-2" />
-  </fieldset>
+  <button type="submit" class="btn btn-primary" />submit</button>
 </form>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/rqtl2-qc-job-results.html b/qc_app/templates/rqtl2/rqtl2-qc-job-results.html
index 35dc95a..59bc8cd 100644
--- a/qc_app/templates/rqtl2/rqtl2-qc-job-results.html
+++ b/qc_app/templates/rqtl2/rqtl2-qc-job-results.html
@@ -6,61 +6,61 @@
 {%block contents%}
 <h1 class="heading">R/qtl2 bundle: QC job results</h1>
 
-<div class="explainer">
+<div class="row">
   <p>The R/qtl2 bundle you uploaded has passed all automated quality-control
     checks successfully.</p>
   <p>You may now continue to load the data into GeneNetwork for the bundle, with
     the following details:</p>
 </div>
 
-<form id="form-qc-job-results"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.Id)}}"
-      method="POST">
-  <fieldset>
-    <legend>Species</legend>
-    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+<div class="row">
+  <form id="form-qc-job-results"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.Id)}}"
+        method="POST">
+    <div class="form-group">
+      <legend>Species</legend>
+      <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
 
-    <span class="form-col-1">Name</span>
-    <span class="form-col-2">{{species.Name | capitalize}}</span>
+      <span class="form-label">Name</span>
+      <span class="form-text">{{species.Name | capitalize}}</span>
 
-    <span class="form-col-1">Scientific</span>
-    <span class="form-col-2">{{species.FullName | capitalize}}</span>
-  </fieldset>
+      <span class="form-label">Scientific</span>
+      <span class="form-text">{{species.FullName | capitalize}}</span>
+    </div>
 
-  <fieldset>
-    <legend>population</legend>
-    <input type="hidden" name="population_id" value="{{population.Id}}" />
+    <div class="form-group">
+      <legend>population</legend>
+      <input type="hidden" name="population_id" value="{{population.Id}}" />
 
-    <span class="form-col-1">Name</span>
-    <span class="form-col-2">{{population.InbredSetName}}</span>
+      <span class="form-label">Name</span>
+      <span class="form-text">{{population.InbredSetName}}</span>
 
-    <span class="form-col-1">Full Name</span>
-    <span class="form-col-2">{{population.FullName}}</span>
+      <span class="form-label">Full Name</span>
+      <span class="form-text">{{population.FullName}}</span>
 
-    <span class="form-col-1">Genetic Type</span>
-    <span class="form-col-2">{{population.GeneticType}}</span>
+      <span class="form-label">Genetic Type</span>
+      <span class="form-text">{{population.GeneticType}}</span>
 
-    <span class="form-col-1">Description</span>
-    <span class="form-col-2">{{population.Description or "-"}}</span>
-  </fieldset>
+      <span class="form-label">Description</span>
+      <span class="form-text">{{population.Description or "-"}}</span>
+    </div>
 
-  <fieldset>
-    <legend>R/qtl2 Bundle File</legend>
-    <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2bundle}}" />
-    <input type="hidden" name="original-filename" value="{{rqtl2bundleorig}}" />
+    <div class="form-group">
+      <legend>R/qtl2 Bundle File</legend>
+      <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2bundle}}" />
+      <input type="hidden" name="original-filename" value="{{rqtl2bundleorig}}" />
 
-    <span class="form-col-1">Original Name</span>
-    <span class="form-col-2">{{rqtl2bundleorig}}</span>
+      <span class="form-label">Original Name</span>
+      <span class="form-text">{{rqtl2bundleorig}}</span>
 
-    <span class="form-col-1">Internal Name</span>
-    <span class="form-col-2">{{rqtl2bundle[0:25]}}&hellip;</span>
-  </fieldset>
+      <span class="form-label">Internal Name</span>
+      <span class="form-text">{{rqtl2bundle[0:25]}}&hellip;</span>
+    </div>
 
-  <fieldset>
-    <input type="submit" value="continue" class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/rqtl2-qc-job-success.html b/qc_app/templates/rqtl2/rqtl2-qc-job-success.html
index d492898..2861a04 100644
--- a/qc_app/templates/rqtl2/rqtl2-qc-job-success.html
+++ b/qc_app/templates/rqtl2/rqtl2-qc-job-success.html
@@ -6,7 +6,7 @@
 {%block contents%}
 <h2 class="heading">R/qtl2 Bundle: Quality Control Successful</h2>
 
-<div class="explainer">
+<div class="row">
   <p>The R/qtl2 bundle you uploaded has passed <emph>all</emph> quality control
     checks successfully, and is now ready for uploading into the database.</p>
   <p>Click "Continue" below to proceed.</p>
@@ -16,22 +16,22 @@
     The "action" on this form takes us to the next step, where we can
     select all the other data necessary to enter the data into the database.
   -->
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  {{flash_all_messages()}}
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    {{flash_all_messages()}}
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
 
-  <fieldset>
-    <input type="submit" value="continue" class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/select-geno-dataset.html b/qc_app/templates/rqtl2/select-geno-dataset.html
index f092dbc..873f9c3 100644
--- a/qc_app/templates/rqtl2/select-geno-dataset.html
+++ b/qc_app/templates/rqtl2/select-geno-dataset.html
@@ -6,131 +6,139 @@
 {%block contents%}
 <h2 class="heading">Select Genotypes Dataset</h2>
 
-<div class="explainer">
+<div class="row">
   <p>Your R/qtl2 files bundle contains a "geno" specification. You will
     therefore need to select from one of the existing Genotype datasets or
     create a new one.</p>
   <p>This is the dataset where your data will be organised under.</p>
 </div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_geno_dataset',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">select from existing genotype datasets</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-
-  {{flash_messages("error-rqtl2-select-geno-dataset")}}
-
-  <fieldset>
-    <legend>Datasets</legend>
-    <label for="select:geno-datasets">Dataset</label>
-    <select id="select:geno-datasets"
-	    name="geno-dataset-id"
-	    required="required"
-	    {%if datasets | length == 0%}
-	    disabled="disabled"
-	    {%endif%}>
-      <option value="">Select dataset</option>
-      {%for dset in datasets%}
-      <option value="{{dset['Id']}}">{{dset["Name"]}} ({{dset["FullName"]}})</option>
-      {%endfor%}
-    </select>
-    <span class="form-col-2">
-      Select from the existing genotype datasets for species
-      {{species.SpeciesName}} ({{species.FullName}}).
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="select dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
-
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
-
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.create_geno_dataset',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">create a new genotype dataset</legend>
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-
-  {{flash_messages("error-rqtl2-create-geno-dataset")}}
-
-  <fieldset>
-    <label for="txt:dataset-name">Name</label>
-    <input type="text"
-	   id="txt:dataset-name"
-	   name="dataset-name"
-	   maxlength="100"
-	   required="required" />
-    <span class="form-col-2">
-      Provide the new name for the genotype dataset, e.g. "BXDGeno"
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:dataset-fullname">Full Name</label>
-    <input type="text"
-	   id="txt:dataset-fullname"
-	   name="dataset-fullname"
-	   required="required"
-	   maxlength="100" />
-
-    <span class="form-col-2">
-      Provide a longer name that better describes the genotype dataset, e.g.
-      "BXD Genotypes"
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:dataset-shortname">Short Name</label>
-    <input type="text"
-	   id="txt:dataset-shortname"
-	   name="dataset-shortname"
-	   maxlength="100" />
-
-    <span class="form-col-2">
-      Provide a short name for the genotype dataset. This is optional. If not
-      provided, we'll default to the same value as the "Name" above.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="checkbox"
-	   id="chk:dataset-public"
-	   name="dataset-public"
-	   checked="checked" />
-    <label for="chk:dataset-public">Public?</label>
-
-    <span class="form-col-2">
-      Specify whether the dataset will be available publicly. Check to make the
-      dataset publicly available and uncheck to limit who can access the dataset.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create new dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_geno_dataset',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">select from existing genotype datasets</legend>
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+
+    {{flash_messages("error-rqtl2-select-geno-dataset")}}
+
+    <div class="form-group">
+      <legend>Datasets</legend>
+      <label for="select:geno-datasets" class="form-label">Dataset</label>
+      <select id="select:geno-datasets"
+	      name="geno-dataset-id"
+	      required="required"
+	      {%if datasets | length == 0%}
+	      disabled="disabled"
+	      {%endif%}
+              class="form-control"
+              aria-describedby="help-geno-dataset-select-dataset">
+        <option value="">Select dataset</option>
+        {%for dset in datasets%}
+        <option value="{{dset['Id']}}">{{dset["Name"]}} ({{dset["FullName"]}})</option>
+        {%endfor%}
+      </select>
+      <span id="help-geno-dataset-select-dataset" class="form-text text-muted">
+        Select from the existing genotype datasets for species
+        {{species.SpeciesName}} ({{species.FullName}}).
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">select dataset</button>
+  </form>
+</div>
+
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+</div>
+
+<div class="row">
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.create_geno_dataset',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">create a new genotype dataset</legend>
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+
+    {{flash_messages("error-rqtl2-create-geno-dataset")}}
+
+    <div class="form-group">
+      <label for="txt:dataset-name" class="form-label">Name</label>
+      <input type="text"
+	     id="txt:dataset-name"
+	     name="dataset-name"
+	     maxlength="100"
+	     required="required"
+             class="form-control"
+             aria-describedby="help-geno-dataset-name" />
+      <span id="help-geno-dataset-name" class="form-text text-muted">
+        Provide the new name for the genotype dataset, e.g. "BXDGeno"
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:dataset-fullname" class="form-label">Full Name</label>
+      <input type="text"
+	     id="txt:dataset-fullname"
+	     name="dataset-fullname"
+	     required="required"
+	     maxlength="100"
+             class="form-control"
+             aria-describedby="help-geno-dataset-fullname" />
+
+      <span id="help-geno-dataset-fullname" class="form-text text-muted">
+        Provide a longer name that better describes the genotype dataset, e.g.
+        "BXD Genotypes"
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:dataset-shortname" class="form-label">Short Name</label>
+      <input type="text"
+	     id="txt:dataset-shortname"
+	     name="dataset-shortname"
+	     maxlength="100"
+             class="form-control"
+             aria-describedby="help-geno-dataset-shortname" />
+
+      <span id="help-geno-dataset-shortname" class="form-text text-muted">
+        Provide a short name for the genotype dataset. This is optional. If not
+        provided, we'll default to the same value as the "Name" above.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <input type="checkbox"
+	     id="chk:dataset-public"
+	     name="dataset-public"
+	     checked="checked"
+             class="form-check"
+             aria-describedby="help-geno-datasent-public" />
+      <label for="chk:dataset-public" class="form-check-label">Public?</label>
+
+      <span id="help-geno-dataset-public" class="form-text text-muted">
+        Specify whether the dataset will be available publicly. Check to make the
+        dataset publicly available and uncheck to limit who can access the dataset.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">create new dataset</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/select-population.html b/qc_app/templates/rqtl2/select-population.html
index 1102805..37731f0 100644
--- a/qc_app/templates/rqtl2/select-population.html
+++ b/qc_app/templates/rqtl2/select-population.html
@@ -22,29 +22,26 @@
   {{flash_messages("error-select-population")}}
 
   <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <fieldset>
-    <label for="select:inbredset" class="form-col-1">population</label>
+
+  <div class="form-group">
+    <label for="select:inbredset" class="form-label">population</label>
     <select id="select:inbredset"
 	    name="inbredset_id"
 	    required="required"
-	    class="form-col-2">
+	    class="form-control">
       <option value="">Select a grouping/population</option>
       {%for pop in populations%}
       <option value="{{pop.InbredSetId}}">
 	{{pop.InbredSetName}} ({{pop.FullName}})</option>
       {%endfor%}
     </select>
-    <span class="form-input-help">If you are adding data to an already existing
+    <span class="form-text text-muted">If you are adding data to an already existing
       population, simply pick the population from this drop-down selector. If
       you cannot find your population from this list, try the form below to
       create a new one..</span>
-  </fieldset>
+  </div>
 
-  <fieldset>
-    <input type="submit"
-	   value="select population"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+  <button type="submit" class="btn btn-primary" />select population</button>
 </form>
 
 <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
@@ -55,70 +52,81 @@
   {{flash_messages("error-create-population")}}
 
   <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <fieldset>
-    <legend>mandatory</legend>
-    <label for="txt:inbredset-name" class="form-col-1">name</label>
-    <input id="txt:inbredset-name"
-	   name="inbredset_name"
-	   type="text"
-	   required="required"
-	   maxlength="30"
-	   placeholder="Enter grouping/population name"
-	   class="form-col-2" />
-    <span class="form-input-help">This is a short name that identifies the
-      population. Useful for menus, and quick scanning.</span>
-
-    <label for="txt:" class="form-col-1">full name</label>
-    <input id="txt:inbredset-fullname"
-	   name="inbredset_fullname"
-	   type="text"
-	   required="required"
-	   maxlength="100"
-	   placeholder="Enter the grouping/population's full name"
-	   class="form-col-2" />
-    <span class="form-input-help">This can be the same as the name above, or can
-      be longer. Useful for documentation, and human communication.</span>
-  </fieldset>
-  <fieldset>
-    <legend>Optional</legend>
-
-    <label for="num:public" class="form-col-1">public?</label>
-    <select id="num:public"
-	    name="public"
-	    class="form-col-2">
-      <option value="0">0 - Only accessible to authorised users</option>
-      <option value="1">1 - Publicly accessible to all users</option>
-      <option value="2" selected>
-	2 - Publicly accessible to all users</option>
-    </select>
-    <span class="form-input-help">This determines whether the
-      population/grouping will appear on the menus for users.</span>
-
-    <label for="txt:inbredset-family" class="form-col-1">family</label>
-    <input id="txt:inbredset-family"
-	   name="inbredset_family"
-	   type="text"
-	   placeholder="I am not sure what this is about."
-	   class="form-col-2" />
-    <span class="form-input-help">I do not currently know what this is about.
-      This is a failure on my part to figure out what this is and provide a
-      useful description. Please feel free to remind me.</span>
-
-    <label for="txtarea:" class="form-col-1">Description</label>
+
+  <div class="form-group">
+    <legend class="heading">mandatory</legend>
+
+    <div class="form-group">
+      <label for="txt:inbredset-name" class="form-label">name</label>
+      <input id="txt:inbredset-name"
+	     name="inbredset_name"
+	     type="text"
+	     required="required"
+	     maxlength="30"
+	     placeholder="Enter grouping/population name"
+	     class="form-control" />
+      <span class="form-text text-muted">This is a short name that identifies the
+        population. Useful for menus, and quick scanning.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:" class="form-label">full name</label>
+      <input id="txt:inbredset-fullname"
+	     name="inbredset_fullname"
+	     type="text"
+	     required="required"
+	     maxlength="100"
+	     placeholder="Enter the grouping/population's full name"
+	     class="form-control" />
+      <span class="form-text text-muted">This can be the same as the name above, or can
+        be longer. Useful for documentation, and human communication.</span>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <legend class="heading">optional</legend>
+
+    <div class="form-group">
+      <label for="num:public" class="form-label">public?</label>
+      <select id="num:public"
+	      name="public"
+	      class="form-control">
+        <option value="0">0 - Only accessible to authorised users</option>
+        <option value="1">1 - Publicly accessible to all users</option>
+        <option value="2" selected>
+	  2 - Publicly accessible to all users</option>
+      </select>
+      <span class="form-text text-muted">This determines whether the
+        population/grouping will appear on the menus for users.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:inbredset-family" class="form-label">family</label>
+      <input id="txt:inbredset-family"
+	     name="inbredset_family"
+	     type="text"
+	     placeholder="I am not sure what this is about."
+	     class="form-control" />
+      <span class="form-text text-muted">I do not currently know what this is about.
+        This is a failure on my part to figure out what this is and provide a
+        useful description. Please feel free to remind me.</span>
+    </div>
+
+    <div class="form-group">
+    <label for="txtarea:" class="form-label">Description</label>
     <textarea id="txtarea:description"
 	      name="description"
 	      rows="5"
 	      placeholder="Enter a description of this grouping/population"
-	      class="form-col-2"></textarea>
-    <span class="form-input-help">A long-form description of what the population
-      consists of. Useful for humans.</span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create grouping/population"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+	      class="form-control"></textarea>
+    <span class="form-text text-muted">
+      A long-form description of what the population consists of. Useful for
+      humans.</span>
+    </div>
+  </div>
+
+  <button type="submit" class="btn btn-primary" />
+  create grouping/population</button>
 </form>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/select-probeset-dataset.html b/qc_app/templates/rqtl2/select-probeset-dataset.html
index c5acb72..26f52ed 100644
--- a/qc_app/templates/rqtl2/select-probeset-dataset.html
+++ b/qc_app/templates/rqtl2/select-probeset-dataset.html
@@ -6,173 +6,186 @@
 {%block contents%}
 <h2 class="heading">Phenotype(ProbeSet) Dataset</h2>
 
-<div class="explainer">
+<div class="row">
   <p>The R/qtl2 bundle you uploaded contains (a) "<strong>pheno</strong>"
     file(s). This data needs to be organised under a dataset.</p>
   <p>This page gives you the ability to do that.</p>
 </div>
 
 {%if datasets | length > 0%}
-<form method="POST"
-      action="{{url_for('upload.rqtl2.select_probeset_dataset',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:select-probeset-dataset">
-  <legend class="heading">Select from existing ProbeSet datasets</legend>
-  {{flash_messages("error-rqtl2")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
-
-  <fieldset>
-    <label for="select:probe-dataset">Dataset</label>
-    <select id="select:probe-dataset"
-	    name="probe-dataset-id"
-	    required="required"
-	    {%if datasets | length == 0%}disabled="disabled"{%endif%}>
-      <option value="">Select a dataset</option>
-      {%for dataset in datasets%}
-      <option value={{dataset.Id}}>
-	{{dataset.Name}}
-	{%if dataset.FullName%}
-	 -- ({{dataset.FullName}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-
-    <span class="form-col-2">Select from existing ProbeSet datasets.</span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="select dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+<div class="row">
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.select_probeset_dataset',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:select-probeset-dataset">
+    <legend class="heading">Select from existing ProbeSet datasets</legend>
+    {{flash_messages("error-rqtl2")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="select:probe-dataset">Dataset</label>
+      <select id="select:probe-dataset"
+	      name="probe-dataset-id"
+	      required="required"
+	      {%if datasets | length == 0%}disabled="disabled"{%endif%}
+              class="form-control"
+              aria-describedby="help-probe-dataset">
+        <option value="">Select a dataset</option>
+        {%for dataset in datasets%}
+        <option value={{dataset.Id}}>
+	  {{dataset.Name}}
+	  {%if dataset.FullName%}
+	  -- ({{dataset.FullName}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+
+      <span id="help-probe-dataset" class="form-text text-muted">
+        Select from existing ProbeSet datasets.</span>
+    </div>
+
+    <button type="submit" class="btn btn-primary" />select dataset</button>
 </form>
+</div>
 
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+</div>
 {%endif%}
 
-<div class="explainer">
+<div class="row">
   <p>Create an entirely new ProbeSet dataset for your data.</p>
 </div>
 
-<form method="POST"
-      action="{{url_for('upload.rqtl2.create_probeset_dataset',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:create-probeset-dataset">
-  <legend class="heading">Create a new ProbeSet dataset</legend>
-  {{flash_messages("error-rqtl2-create-probeset-dataset")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
-
-  <fieldset>
-    <label for="select:average">averaging method</label>
-    <select id="select:average"
-	    name="averageid"
-	    required="required">
-      <option value="">Select averaging method</option>
-      {%for avgmethod in avgmethods%}
-      <option value="{{avgmethod.Id}}">
-	{{avgmethod.Name}}
-	{%if avgmethod.Normalization%}
-	({{avgmethod.Normalization}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-
-    <span class="form-col-2">
-      Select the averaging method used for your data.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetname">Name</label>
-    <input type="text" id="txt:datasetname" name="datasetname"
-	   required="required"
-	   maxlength="40"
-	   title="Name of the dataset, e.g 'BXDMicroArray_ProbeSet_June03'. (Required)" />
-
-    <span class="form-col-2">
-      Provide a name for the dataset e.g. "BXDMicroArray_ProbeSet_June03". This
-      is mandatory <strong>MUST</strong> be provided.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetfullname">Full Name</label>
-    <input type="text" id="txt:datasetfullname" name="datasetfullname"
-	   required="required"
-	   maxlength="100"
-	   title="A longer name for the dataset, e.g. 'UTHSC Brain mRNA U74Av2 (Jun03) MAS5'. (Required)" />
-
-    <span class="form-col-2">
-      Provide a longer, more descriptive name for the dataset e.g.
-      "UTHSC Brain mRNA U74Av2 (Jun03) MAS5". This is mandatory and
-      <strong>MUST</strong> be provided.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:datasetshortname">Short Name</label>
-    <input type="text" id="txt:datasetshortname" name="datasetshortname"
-	   maxlength="100"
-	   title="An abbreviated name for the dataset, e.g 'Br_U_0603_M'. (Optional)" />
-
-    <span class="form-col-2">
-      Provide a longer, more descriptive name for the dataset e.g. "Br_U_0603_M".
-      This is optional.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="checkbox" id="chk:public" name="datasetpublic"
-	   checked="checked"
-	   title="Whether or not the dataset is accessible by the general public." />
-    <label for="chk:datasetpublic">Public?</label>
-
-    <span class="form-col-2">
-      Check to specify that the dataset will be publicly available. Uncheck to
-      limit access to the dataset.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="select:datasetdatascale">Data Scale</label>
-    <select id="select:datasetdatascale"
-	    name="datasetdatascale"
-	    required="required">
-      <option value="log2" selected="selected">log2</option>
-      <option value="z_score">z_score</option>
-      <option value="log2_ratio">log2_ratio</option>
-      <option value="linear">linear</option>
-      <option value="linear_positive">linear_positive</option>
-    </select>
-
-    <span class="form-col-2">
-      Select from a list of scaling methods.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create dataset"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.create_probeset_dataset',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:create-probeset-dataset">
+    <legend class="heading">Create a new ProbeSet dataset</legend>
+    {{flash_messages("error-rqtl2-create-probeset-dataset")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="select:average">averaging method</label>
+      <select id="select:average"
+	      name="averageid"
+	      required="required"
+              class="form-control"
+              aria-describedby="help-average">
+        <option value="">Select averaging method</option>
+        {%for avgmethod in avgmethods%}
+        <option value="{{avgmethod.Id}}">
+	  {{avgmethod.Name}}
+	  {%if avgmethod.Normalization%}
+	  ({{avgmethod.Normalization}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+
+      <span id="help-average" class="form-text text-muted">
+        Select the averaging method used for your data.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetname">Name</label>
+      <input type="text" id="txt:datasetname" name="datasetname"
+	     required="required"
+	     maxlength="40"
+	     title="Name of the dataset, e.g 'BXDMicroArray_ProbeSet_June03'. (Required)"
+             class="form-control"
+             aria-describedby="help-dataset-name" />
+
+      <span id="help-dataset-name" class="form-text text-muted">
+        Provide a name for the dataset e.g. "BXDMicroArray_ProbeSet_June03". This
+        is mandatory <strong>MUST</strong> be provided.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetfullname">Full Name</label>
+      <input type="text" id="txt:datasetfullname" name="datasetfullname"
+	     required="required"
+	     maxlength="100"
+	     title="A longer name for the dataset, e.g. 'UTHSC Brain mRNA U74Av2 (Jun03) MAS5'. (Required)"
+             class="form-control"
+             aria-describedby="help-dataset-fullname" />
+
+      <span id="help-dataset-fullname" class="form-text text-muted">
+        Provide a longer, more descriptive name for the dataset e.g.
+        "UTHSC Brain mRNA U74Av2 (Jun03) MAS5". This is mandatory and
+        <strong>MUST</strong> be provided.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="txt:datasetshortname">Short Name</label>
+      <input type="text" id="txt:datasetshortname" name="datasetshortname"
+	     maxlength="100"
+	     title="An abbreviated name for the dataset, e.g 'Br_U_0603_M'. (Optional)"
+             class="form-control"
+             aria-describedby="help-dataset-shortname" />
+
+      <span id="help-dataset-shortname" class="form-text text-muted">
+        Provide a longer, more descriptive name for the dataset e.g. "Br_U_0603_M".
+        This is optional.
+      </span>
+    </div>
+
+    <div class="form-check">
+      <input type="checkbox" id="chk:public" name="datasetpublic"
+	     checked="checked"
+	     title="Whether or not the dataset is accessible by the general public."
+             class="form-check-input"
+             aria-describedby="help-public" />
+      <label class="form-check-label" for="chk:datasetpublic">Public?</label>
+
+      <span id="help-public" class="form-text text-muted">
+        Check to specify that the dataset will be publicly available. Uncheck to
+        limit access to the dataset.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="select:datasetdatascale">Data Scale</label>
+      <select id="select:datasetdatascale"
+	      name="datasetdatascale"
+	      required="required"
+              class="form-control"
+              aria-describedby="help-dataset-datascale">
+        <option value="log2" selected="selected">log2</option>
+        <option value="z_score">z_score</option>
+        <option value="log2_ratio">log2_ratio</option>
+        <option value="linear">linear</option>
+        <option value="linear_positive">linear_positive</option>
+      </select>
+
+      <span id="help-dataset-datascale" class="form-text text-muted">
+        Select from a list of scaling methods.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">create dataset</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/select-probeset-study-id.html b/qc_app/templates/rqtl2/select-probeset-study-id.html
index c387514..b9bf52e 100644
--- a/qc_app/templates/rqtl2/select-probeset-study-id.html
+++ b/qc_app/templates/rqtl2/select-probeset-study-id.html
@@ -6,128 +6,138 @@
 {%block contents%}
 <h2 class="heading">Phenotype(ProbeSet) Study</h2>
 
-<div class="explainer">
+<div class="row">
   <p>The R/qtl2 bundle you uploaded contains (a) "<strong>pheno</strong>"
     file(s). This data needs to be organised under a study.</p>
   <p>In this page, you can either select from a existing dataset:</p>
+
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.select_probeset_study',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:select-probeset-study">
+    <legend class="heading">Select from existing ProbeSet studies</legend>
+    {{flash_messages("error-rqtl2-select-probeset-study")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+
+    <div>
+      <label for="select:probe-study" class="form-label">Study</label>
+      <select id="select:probe-study"
+	      name="probe-study-id"
+	      required="required"
+              aria-describedby="help-select-probeset-study"
+	      {%if studies | length == 0%}disabled="disabled"{%endif%}
+              class="form-control">
+        <option value="">Select a study</option>
+        {%for study in studies%}
+        <option value={{study.Id}}>
+	  {{study.Name}}
+	  {%if study.FullName%}
+	  -- ({{study.FullName}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+      <small id="help-select-probeset-study" class="form-text text-muted">
+        Select from existing ProbeSet studies.
+      </small>
+    </div>
+
+    <button type="submit" class="btn btn-primary">select study</button>
+  </form>
 </div>
 
-<form method="POST"
-      action="{{url_for('upload.rqtl2.select_probeset_study',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:select-probeset-study">
-  <legend class="heading">Select from existing ProbeSet studies</legend>
-  {{flash_messages("error-rqtl2-select-probeset-study")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-
-  <fieldset>
-    <label for="select:probe-study">Study</label>
-    <select id="select:probe-study"
-	    name="probe-study-id"
-	    required="required"
-	    {%if studies | length == 0%}disabled="disabled"{%endif%}>
-      <option value="">Select a study</option>
-      {%for study in studies%}
-      <option value={{study.Id}}>
-	{{study.Name}}
-	{%if study.FullName%}
-	 -- ({{study.FullName}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-    <span class="form-col-2">Select from existing ProbeSet studies.</span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="select study"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
-
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
-
-<div class="explainer">
-  <p>Create a new ProbeSet dataset below:</p>
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
 </div>
 
-<form method="POST"
-      action="{{url_for('upload.rqtl2.create_probeset_study',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:create-probeset-study">
-  <legend class="heading">Create new ProbeSet study</legend>
-
-  {{flash_messages("error-rqtl2-create-probeset-study")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
-
-  <fieldset>
-    <label for="select:platform">Platform</label>
-    <select id="select:platform"
-	    name="platformid"
-	    required="required"
-	    {%if platforms | length == 0%}disabled="disabled"{%endif%}>
-      <option value="">Select a platform</option>
-      {%for platform in platforms%}
-      <option value="{{platform.GeneChipId}}">
-	{{platform.GeneChipName}} ({{platform.Name}})
-      </option>
-      {%endfor%}
-    </select>
-    <span class="form-col-2">Select from a list of known genomics platforms.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:studyname">Study name</label>
-    <input type="text" id="txt:studyname" name="studyname"
-	   placeholder="Name of the study. (Required)"
-	   required="required"
-	   maxlength="100" />
-    <span class="form-col-2">Provide a name for the study.</span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:studyfullname">Full Study Name</label>
-    <input type="text" id="txt:studyfullname" name="studyfullname"
-	   placeholder="Longer name of the study. (Optional)"
-	   maxlength="100" />
-    <span class="form-col-2">
-      Provide a longer, more descriptive name for the study. This is optional
-      and you can leave it blank.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:studyshortname">Short Study Name</label>
-    <input type="text" id="txt:studyshortname" name="studyshortname"
-	   placeholder="Shorter name of the study. (Optional)"
-	   maxlength="100" />
-    <span class="form-col-2">
-      Provide a shorter name for the study. This is optional and you can leave
-      it blank.
-    </span>
-  </fieldset>
-
-    <fieldset>
-    <input type="submit"
-	   value="create study"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+
+  <p>Create a new ProbeSet dataset below:</p>
+
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.create_probeset_study',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:create-probeset-study">
+    <legend class="heading">Create new ProbeSet study</legend>
+
+    {{flash_messages("error-rqtl2-create-probeset-study")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="tissueid" value="{{tissue.Id}}" />
+
+    <div>
+      <label for="select:platform" class="form-label">Platform</label>
+      <select id="select:platform"
+	      name="platformid"
+	      required="required"
+              aria-describedby="help-select-platform"
+	      {%if platforms | length == 0%}disabled="disabled"{%endif%}
+              class="form-control">
+        <option value="">Select a platform</option>
+        {%for platform in platforms%}
+        <option value="{{platform.GeneChipId}}">
+	  {{platform.GeneChipName}} ({{platform.Name}})
+        </option>
+        {%endfor%}
+      </select>
+      <small id="help-select-platform" class="form-text text-muted">
+        Select from a list of known genomics platforms.
+      </small>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:studyname" class="form-label">Study name</label>
+      <input type="text" id="txt:studyname" name="studyname"
+	     placeholder="Name of the study. (Required)"
+	     required="required"
+	     maxlength="100"
+             class="form-control" />
+      <span class="form-text text-muted" id="help-study-name">
+        Provide a name for the study.</span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:studyfullname" class="form-label">Full Study Name</label>
+      <input type="text"
+             id="txt:studyfullname"
+             name="studyfullname"
+	     placeholder="Longer name of the study. (Optional)"
+	     maxlength="100"
+             class="form-control" />
+      <span class="form-text text-muted" id="help-study-full-name">
+        Provide a longer, more descriptive name for the study. This is optional
+        and you can leave it blank.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt:studyshortname" class="form-label">Short Study Name</label>
+      <input type="text"
+             id="txt:studyshortname"
+             name="studyshortname"
+	     placeholder="Shorter name of the study. (Optional)"
+	     maxlength="100"
+             class="form-control" />
+      <span class="form-text text-muted" id="help-study-short-name">
+        Provide a shorter name for the study. This is optional and you can leave
+        it blank.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">create study</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/select-tissue.html b/qc_app/templates/rqtl2/select-tissue.html
index 78d5afe..34e1758 100644
--- a/qc_app/templates/rqtl2/select-tissue.html
+++ b/qc_app/templates/rqtl2/select-tissue.html
@@ -6,107 +6,110 @@
 {%block contents%}
 <h2 class="heading">Tissue</h2>
 
-<div class="explainer">
+<div class="row">
   <p>The data you are uploading concerns a tissue, cell, organ, or other
     biological material used in an experiment.</p>
   <p>Select the appropriate biological material below</p>
 </div>
 
 {%if tissues | length > 0%}
-<form method="POST"
-      action="{{url_for('upload.rqtl2.select_tissue',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:select-probeset-dataset">
-  <legend class="heading">Select from existing ProbeSet datasets</legend>
-  {{flash_messages("error-select-tissue")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-
-  <fieldset>
-    <label for="select-tissue">Tissue</label>
-    <select id="select-tissue"
-	    name="tissueid"
-	    required="required"
-	    {%if tissues | length == 0%}disabled="disabled"{%endif%}>
-      <option value="">Select a tissue</option>
-      {%for tissue in tissues%}
-      <option value={{tissue.Id}}>
-	{{tissue.Name}}
-	{%if tissue.Short_Name%}
-	 -- ({{tissue.Short_Name}})
-	{%endif%}
-      </option>
-      {%endfor%}
-    </select>
-
-    <span class="form-col-2">Select from existing biological material.</span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="use selected"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+<div class="row">
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.select_tissue',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:select-probeset-dataset">
+    <legend class="heading">Select from existing ProbeSet datasets</legend>
+    {{flash_messages("error-select-tissue")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="select-tissue">Tissue</label>
+      <select id="select-tissue"
+	      name="tissueid"
+	      required="required"
+	      {%if tissues | length == 0%}disabled="disabled"{%endif%}
+              class="form-control"
+              aria-describedby="help-select-tissue">
+        <option value="">Select a tissue</option>
+        {%for tissue in tissues%}
+        <option value={{tissue.Id}}>
+	  {{tissue.Name}}
+	  {%if tissue.Short_Name%}
+	  -- ({{tissue.Short_Name}})
+	  {%endif%}
+        </option>
+        {%endfor%}
+      </select>
+
+      <span id="help-select-tissue" class="form-text text-muted">
+        Select from existing biological material.</span>
+    </div>
+
+    <button type="submit" class="btn btn-primary">use selected</button>
+  </form>
+</div>
 
-<p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+<div class="row">
+  <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
+</div>
 {%endif%}
 
-<div class="explainer">
+<div class="row">
   <p>If you cannot find the biological material in the drop-down above, add it
     to the system below.</p>
-</div>
 
-<form method="POST"
-      action="{{url_for('upload.rqtl2.create_tissue',
-	      species_id=species.SpeciesId, population_id=population.Id)}}"
-      id="frm:create-probeset-dataset">
-  <legend class="heading">Add new tissue, organ or biological material</legend>
-  {{flash_messages("error-create-tissue")}}
-
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-
-  <fieldset>
-    <label for="tissue-name">name</label>
-    <input type="text"
-           id="txt-tissuename"
-           name="tissuename"
-           required="required"
-           title = "A name to identify the tissue, organ or biological material." />
-
-    <span class="form-col-2">
-      A name to identify the tissue, organ or biological material.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt-shortname">short name</label>
-    <input type="text" id="txt-tissueshortname" name="tissueshortname"
-	   required="required"
-	   maxlength="7"
-	   title="A short name (e.g. 'Mam') for the biological material." />
-
-    <span class="form-col-2">
-      Provide a short name for the tissue, organ or biological material used in
-      the experiment.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="add new material"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+  <form method="POST"
+        action="{{url_for('upload.rqtl2.create_tissue',
+	        species_id=species.SpeciesId, population_id=population.Id)}}"
+        id="frm:create-probeset-dataset">
+    <legend class="heading">Add new tissue, organ or biological material</legend>
+    {{flash_messages("error-create-tissue")}}
+
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+
+    <div class="form-group">
+      <label class="form-label" for="tissue-name">name</label>
+      <input type="text"
+             id="txt-tissuename"
+             name="tissuename"
+             required="required"
+             title = "A name to identify the tissue, organ or biological material."
+             class="form-control"
+             aria-describedby="help-tissue-name" />
+
+      <span class="form-text text-muted" id="help-tissue-name">
+        A name to identify the tissue, organ or biological material.
+      </span>
+    </div>
+
+    <div class="form-group">
+      <label for="txt-shortname" class="form-label">short name</label>
+      <input type="text" id="txt-tissueshortname" name="tissueshortname"
+	     required="required"
+	     maxlength="7"
+	     title="A short name (e.g. 'Mam') for the biological material."
+             class="form-control"
+             aria-describedby="help-tissue-short-name" />
+
+      <span class="form-text text-muted" id="help-tissue-short-name">
+        Provide a short name for the tissue, organ or biological material used in
+        the experiment.
+      </span>
+    </div>
+
+    <button type="submit" class="btn btn-primary" />add new material</button>
 </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/rqtl2/summary-info.html b/qc_app/templates/rqtl2/summary-info.html
index 8b05578..1be87fa 100644
--- a/qc_app/templates/rqtl2/summary-info.html
+++ b/qc_app/templates/rqtl2/summary-info.html
@@ -6,60 +6,60 @@
 {%block contents%}
 <h2 class="heading">Summary</h2>
 
-<div class="explainer">
+<div class="row">
   <p>This is the information you have provided to accompany the R/qtl2 bundle
     you have uploaded. Please verify the information is correct before
     proceeding.</p>
 </div>
 
-<dl>
-  <dt>Species</dt>
-  <dd>{{species.SpeciesName}} ({{species.FullName}})</dd>
+<div class="row">
+  <dl>
+    <dt>Species</dt>
+    <dd>{{species.SpeciesName}} ({{species.FullName}})</dd>
 
-  <dt>Population</dt>
-  <dd>{{population.InbredSetName}}</dd>
+    <dt>Population</dt>
+    <dd>{{population.InbredSetName}}</dd>
 
-  {%if geno_dataset%}
-  <dt>Genotype Dataset</dt>
-  <dd>{{geno_dataset.Name}} ({{geno_dataset.FullName}})</dd>
-  {%endif%}
+    {%if geno_dataset%}
+    <dt>Genotype Dataset</dt>
+    <dd>{{geno_dataset.Name}} ({{geno_dataset.FullName}})</dd>
+    {%endif%}
 
-  {%if tissue%}
-  <dt>Tissue</dt>
-  <dd>{{tissue.TissueName}} ({{tissue.Name}}, {{tissue.Short_Name}})</dd>
-  {%endif%}
+    {%if tissue%}
+    <dt>Tissue</dt>
+    <dd>{{tissue.TissueName}} ({{tissue.Name}}, {{tissue.Short_Name}})</dd>
+    {%endif%}
 
-  {%if probe_study%}
-  <dt>ProbeSet Study</dt>
-  <dd>{{probe_study.Name}} ({{probe_study.FullName}})</dd>
-  {%endif%}
+    {%if probe_study%}
+    <dt>ProbeSet Study</dt>
+    <dd>{{probe_study.Name}} ({{probe_study.FullName}})</dd>
+    {%endif%}
 
-  {%if probe_dataset%}
-  <dt>ProbeSet Dataset</dt>
-  <dd>{{probe_dataset.Name2}} ({{probe_dataset.FullName}})</dd>
-  {%endif%}
-</dl>
+    {%if probe_dataset%}
+    <dt>ProbeSet Dataset</dt>
+    <dd>{{probe_dataset.Name2}} ({{probe_dataset.FullName}})</dd>
+    {%endif%}
+  </dl>
+</div>
 
-<form id="frm:confirm-rqtl2bundle-details"
-      action="{{url_for('upload.rqtl2.confirm_bundle_details',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  <legend class="heading">Create ProbeSet dataset</legend>
+<div class="row">
+  <form id="frm:confirm-rqtl2bundle-details"
+        action="{{url_for('upload.rqtl2.confirm_bundle_details',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    <legend class="heading">Create ProbeSet dataset</legend>
 
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
-  <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
-  <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
-  <input type="hidden" name="probe-dataset-id" value="{{probe_dataset.Id}}" />
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file" value="{{rqtl2_bundle_file}}" />
+    <input type="hidden" name="geno-dataset-id" value="{{geno_dataset.Id}}" />
+    <input type="hidden" name="probe-study-id" value="{{probe_study.Id}}" />
+    <input type="hidden" name="probe-dataset-id" value="{{probe_dataset.Id}}" />
 
-  <fieldset>
-    <input type="submit"
-	   value="continue"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 {%endblock%}
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%}
diff --git a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-02.html b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-02.html
index 75f4a96..93b1dc9 100644
--- a/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-02.html
+++ b/qc_app/templates/rqtl2/upload-rqtl2-bundle-step-02.html
@@ -6,30 +6,28 @@
 {%block contents%}
 <h2 class="heading">Upload R/qtl2 Bundle</h2>
 
-<div class="explainer">
+<div class="row">
   <p>You have successfully uploaded the zipped bundle of R/qtl2 files.</p>
   <p>The next step is to select the various extra information we need to figure
     out what to do with the data. You will select/create the relevant studies
     and/or datasets to organise the data in the steps that follow.</p>
   <p>Click "Continue" below to proceed.</p>
-</div>
 
-<form id="frm-upload-rqtl2-bundle"
-      action="{{url_for('upload.rqtl2.select_dataset_info',
-	      species_id=species.SpeciesId,
-	      population_id=population.InbredSetId)}}"
-      method="POST"
-      enctype="multipart/form-data">
-  {{flash_all_messages()}}
-  <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <input type="hidden" name="population_id"
-	 value="{{population.InbredSetId}}" />
-  <input type="hidden" name="rqtl2_bundle_file"
-	 value="{{rqtl2_bundle_file}}" />
+  <form id="frm-upload-rqtl2-bundle"
+        action="{{url_for('upload.rqtl2.select_dataset_info',
+	        species_id=species.SpeciesId,
+	        population_id=population.InbredSetId)}}"
+        method="POST"
+        enctype="multipart/form-data">
+    {{flash_all_messages()}}
+    <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
+    <input type="hidden" name="population_id"
+	   value="{{population.InbredSetId}}" />
+    <input type="hidden" name="rqtl2_bundle_file"
+	   value="{{rqtl2_bundle_file}}" />
 
-  <fieldset>
-    <input type="submit" value="continue" class="btn btn-primary form-col-2" />
-  </fieldset>
-</form>
+    <button type="submit" class="btn btn-primary">continue</button>
+  </form>
+</div>
 
 {%endblock%}
diff --git a/qc_app/templates/samples/select-population.html b/qc_app/templates/samples/select-population.html
index 5d78826..da19ddc 100644
--- a/qc_app/templates/samples/select-population.html
+++ b/qc_app/templates/samples/select-population.html
@@ -13,33 +13,28 @@
     (e.g. Inbred populations, cell tissue, etc.)</p>
 </div>
 
-<hr />
-
 <form method="POST" action="{{url_for('samples.select_population',
                             species_id=species.SpeciesId)}}">
   <legend class="heading">select grouping/population</legend>
   {{flash_messages("error-select-population")}}
 
   <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <fieldset>
-    <label for="select:inbredset" class="form-col-1">grouping/population</label>
+
+  <div class="form-group">
+    <label for="select:inbredset" class="form-label">grouping/population</label>
     <select id="select:inbredset"
 	    name="inbredset_id"
 	    required="required"
-	    class="form-col-2">
+	    class="form-control">
       <option value="">Select a grouping/population</option>
       {%for pop in populations%}
       <option value="{{pop.InbredSetId}}">
 	{{pop.InbredSetName}} ({{pop.FullName}})</option>
       {%endfor%}
     </select>
-  </fieldset>
+  </div>
 
-  <fieldset>
-    <input type="submit"
-	   value="select population"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+  <button type="submit" class="btn btn-primary">select population</button>
 </form>
 
 <p style="color:#FE3535; padding-left:20em; font-weight:bolder;">OR</p>
@@ -50,54 +45,51 @@
   {{flash_messages("error-create-population")}}
 
   <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-  <fieldset>
+  <div class="form-group">
     <legend>mandatory</legend>
-    <label for="txt:inbredset-name" class="form-col-1">name</label>
+
+    <label for="txt:inbredset-name" class="form-label">name</label>
     <input id="txt:inbredset-name"
 	   name="inbredset_name"
 	   type="text"
 	   required="required"
 	   placeholder="Enter grouping/population name"
-	   class="form-col-2" />
+	   class="form-control" />
 
-    <label for="txt:" class="form-col-1">full name</label>
+    <label for="txt:" class="form-label">full name</label>
     <input id="txt:inbredset-fullname"
 	   name="inbredset_fullname"
 	   type="text"
 	   required = "required"
 	   placeholder="Enter the grouping/population's full name"
-	   class="form-col-2" />
-  </fieldset>
-  <fieldset>
+	   class="form-control" />
+  </div>
+  <div class="form-group">
     <legend>Optional</legend>
 
-    <label for="num:public" class="form-col-1">public?</label>
+    <label for="num:public" class="form-label">public?</label>
     <input id="num:public"
 	   name="public"
 	   type="number"
 	   min="0" max="2" value="2"
-	   class="form-col-2" />
+	   class="form-control" />
 
-    <label for="txt:inbredset-family" class="form-col-1">family</label>
+    <label for="txt:inbredset-family" class="form-label">family</label>
     <input id="txt:inbredset-family"
 	   name="inbredset_family"
 	   type="text"
 	   placeholder="I am not sure what this is about."
-	   class="form-col-2" />
+	   class="form-control" />
 
-    <label for="txtarea:" class="form-col-1">Description</label>
+    <label for="txtarea:" class="form-label">Description</label>
     <textarea id="txtarea:description"
 	      name="description"
 	      rows="5"
 	      placeholder="Enter a description of this grouping/population"
-	      class="form-col-2"></textarea>
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="create grouping/population"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+	      class="form-control"></textarea>
+  </div>
+
+  <button type="submit" class="btn btn-primary">create grouping/population</button>
 </form>
 
 {%endblock%}
diff --git a/qc_app/templates/samples/select-species.html b/qc_app/templates/samples/select-species.html
index 44c0d4f..edadc61 100644
--- a/qc_app/templates/samples/select-species.html
+++ b/qc_app/templates/samples/select-species.html
@@ -12,18 +12,19 @@
 
 <form method="POST" action="{{url_for('samples.select_species')}}">
   <legend class="heading">upload samples</legend>
-  <fieldset>
-    <label for="select_species02">Species</label>
-    <select id="select_species02" name="species_id" required="required">
+  <div class="form-group">
+    <label for="select_species02" class="form-label">Species</label>
+    <select id="select_species02"
+            name="species_id"
+            required="required"
+            class="form-control">
       <option value="">Select species</option>
       {%for spec in species%}
       <option value="{{spec.SpeciesId}}">{{spec.MenuName}}</option>
       {%endfor%}
     </select>
-  </fieldset>
+  </div>
 
-  <fieldset>
-    <input type="submit" value="submit" class="btn btn-primary form-col-2" />
-  </fieldset>
+  <button type="submit" class="btn btn-primary">submit</button>
 </form>
 {%endblock%}
diff --git a/qc_app/templates/samples/upload-samples.html b/qc_app/templates/samples/upload-samples.html
index 29b08f6..e62de57 100644
--- a/qc_app/templates/samples/upload-samples.html
+++ b/qc_app/templates/samples/upload-samples.html
@@ -3,16 +3,7 @@
 
 {%block title%}Upload Samples{%endblock%}
 
-{%block css%}
-<style type="text/css">
-  #form-samples {
-      background-color: #D1D1D1;
-  }
-  #form-samples fieldset:nth-child(odd){
-      background-color: white;
-  }
-</style>
-{%endblock%}
+{%block css%}{%endblock%}
 
 {%block contents%}
 <h1 class="heading">upload samples</h1>
@@ -20,23 +11,23 @@
 {{flash_messages("alert-success")}}
 
 <p>You can now upload a character-separated value (CSV) file that contains
-    details about your samples. The CSV file should have the following fields:
-    <dl>
-      <dt>Name</dt>
-      <dd>The primary name for the sample</dd>
+  details about your samples. The CSV file should have the following fields:
+  <dl>
+    <dt>Name</dt>
+    <dd>The primary name for the sample</dd>
 
-      <dt>Name2</dt>
-      <dd>A secondary name for the sample. This can simply be the same as
-	<strong>Name</strong> above. This field <strong>MUST</strong> contain a
-	value.</dd>
+    <dt>Name2</dt>
+    <dd>A secondary name for the sample. This can simply be the same as
+      <strong>Name</strong> above. This field <strong>MUST</strong> contain a
+      value.</dd>
 
-      <dt>Symbol</dt>
-      <dd>A symbol for the sample. Can be an empty field.</dd>
+    <dt>Symbol</dt>
+    <dd>A symbol for the sample. Can be an empty field.</dd>
 
-      <dt>Alias</dt>
-      <dd>An alias for the sample. Can be an empty field.</dd>
-    </dl>
-  </p>
+    <dt>Alias</dt>
+    <dd>An alias for the sample. Can be an empty field.</dd>
+  </dl>
+</p>
 
 <form id="form-samples"
       method="POST"
@@ -45,32 +36,32 @@
               population_id=population.InbredSetId)}}"
       enctype="multipart/form-data">
   <legend class="heading">upload samples</legend>
-  <fieldset>
+
+  <div class="form-group">
     <input type="hidden" name="species_id" value="{{species.SpeciesId}}" />
-    <label class="form-col-1">species:</label>
-    <span class="form-col-2">{{species.SpeciesName}} [{{species.MenuName}}]</span>
-  </fieldset>
+    <label class="form-label">species:</label>
+    <span class="form-text">{{species.SpeciesName}} [{{species.MenuName}}]</span>
+  </div>
 
-  <fieldset>
+  <div class="form-group">
     <input type="hidden" name="inbredset_id" value="{{population.InbredSetId}}" />
-    <label class="form-col-1">grouping/population:</label>
-    <span class="form-col-2">{{population.Name}} [{{population.FullName}}]</span>
-  </fieldset>
+    <label class="form-label">grouping/population:</label>
+    <span class="form-text">{{population.Name}} [{{population.FullName}}]</span>
+  </div>
 
-  <fieldset>
-    <input id="chk:heading"
-	   type="checkbox"
-	   name="first_line_heading"
-	   class="form-col-1" />
-    <label for="chk:heading" class="form-col-2">first line is a heading?</label>
-  </fieldset>
+  <div class="form-group">
+    <label for="file-samples" class="form-label">select file</label>
+    <input type="file" name="samples_file" id="file:samples"
+	   accept="text/csv, text/tab-separated-values"
+	   class="form-control" />
+  </div>
 
-  <fieldset>
-    <label for="select:separator" class="form-col-1">field separator</label>
+  <div class="form-group">
+    <label for="select:separator" class="form-label">field separator</label>
     <select id="select:separator"
 	    name="separator"
 	    required="required"
-	    class="form-col-2">
+	    class="form-control">
       <option value="">Select separator for your file: (default is comma)</option>
       <option value="&#x0009;">TAB</option>
       <option value="&#x0020;">Space</option>
@@ -81,43 +72,46 @@
     <input id="txt:separator"
 	   type="text"
 	   name="other_separator"
-	   class="form-col-2" />
-    <span class="form-col-2">
-      This is the character that separates the fields in your CSV file. If you
-      select "<strong>Other</strong>", then you must provide the separator in
-      the text field provided.
-    </span>
-  </fieldset>
-
-  <fieldset>
-    <label for="txt:delimiter" class="form-col-1">field delimiter</label>
+	   class="form-control" />
+    <small class="form-text text-muted">
+      If you select '<strong>Other</strong>' for the field separator value,
+      enter the character that separates the fields in your CSV file in the form
+      field below.
+    </small>
+  </div>
+
+  <div class="form-group form-check">
+    <input id="chk:heading"
+	   type="checkbox"
+	   name="first_line_heading"
+	   class="form-check-input" />
+    <label for="chk:heading" class="form-check-label">
+      first line is a heading?</label>
+    <small class="form-text text-muted">
+      Select this if the first line in your file contains headings for the
+      columns.
+    </small>
+  </div>
+
+  <div class="form-group">
+    <label for="txt:delimiter" class="form-label">field delimiter</label>
     <input id="txt:delimiter"
 	   type="text"
 	   name="field_delimiter"
 	   maxlength="1"
-	   class="form-col-2" />
-    <span class="form-col-2">
+	   class="form-control" />
+    <small class="form-text text-muted">
       If there is a character delimiting the string texts within particular
       fields in your CSV, provide the character here. This can be left blank if
       no such delimiters exist in your file.
-    </span>
-  </fieldset>
+    </small>
+  </div>
 
-  <fieldset>
-    <label for="file:samples" class="form-col-1">select file</label>
-    <input type="file" name="samples_file" id="file:samples"
-	   accept="text/csv, text/tab-separated-values"
-	   class="form-col-2" />
-  </fieldset>
-
-  <fieldset>
-    <input type="submit"
-	   value="upload samples file"
-	   class="btn btn-primary form-col-2" />
-  </fieldset>
+  <button type="submit"
+	  class="btn btn-primary">upload samples file</button>
 </form>
 
-<table id="tbl:samples-preview">
+<table id="tbl:samples-preview" class="table">
   <caption class="heading">preview content</caption>
 
   <thead>
diff --git a/qc_app/templates/select_dataset.html b/qc_app/templates/select_dataset.html
index 3c9bd6b..2f07de8 100644
--- a/qc_app/templates/select_dataset.html
+++ b/qc_app/templates/select_dataset.html
@@ -10,17 +10,17 @@
 {%block contents%}
 <h2 class="heading">{{filename}}: select dataset</h2>
 
-<div class="two-column-with-separator">
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.final_confirmation')}}"
 	id="select-dataset-form" class="two-col-sep-col1">
-    <legend>choose existing dataset</legend>
+    <legend class="heading">choose existing dataset</legend>
     {{hidden_fields(
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
 
-    <fieldset>
-      <label for="datasetid" class="form-col-1">dataset:</label>
-      <select id="datasetid" name="datasetid" class="form-col-2"
+    <div class="form-group">
+      <label for="datasetid" class="form-label">dataset:</label>
+      <select id="datasetid" name="datasetid" class="form-control"
 	      {%if datasets | length == 0:%}
 	      disabled="disabled"
 	      {%endif%}>
@@ -30,23 +30,24 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" class="btn btn-primary form-col-2"
-	     value="update database"
-	     {%if datasets | length == 0:%}
-	     disabled="disabled"
-	     {%endif%} />
-    </fieldset>
-  </form>
+    <button type="submit" class="btn btn-primary"
+	    {%if datasets | length == 0:%}
+	    disabled="disabled"
+	    {%endif%} />update database</button>
+</form>
+</div>
 
+<div class="row">
   <p class="two-col-sep-separator">OR</p>
+</div>
 
+<div class="row">
   <form method="POST" id="create-dataset-form"
 	action="{{url_for('dbinsert.create_dataset')}}"
 	class="two-col-sep-col2">
-    <legend>create new dataset</legend>
+    <legend class="heading">create new dataset</legend>
     {{hidden_fields(
     filename, filetype, species=species, genechipid=genechipid,
     studyid=studyid, totallines=totallines)}}
@@ -61,9 +62,9 @@
     {%endif%}
     {%endwith%}
 
-    <fieldset>
-      <label for="avgid" class="form-col-1">average:</label>
-      <select id="avgid" name="avgid" required="required" class="form-col-2">
+    <div class="form-group">
+      <label for="avgid" class="form-label">average:</label>
+      <select id="avgid" name="avgid" required="required" class="form-control">
 	<option value="">Select averaging method</option>
 	{%for method in avgmethods:%}
 	<option value="{{method['AvgMethodId']}}"
@@ -74,46 +75,46 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetname" class="form-col-1">name:</label>
+    <div class="form-group">
+      <label for="datasetname" class="form-label">name:</label>
       <input id="datasetname" name="datasetname" type="text"
-	     class="form-col-2"
+	     class="form-control"
 	     {%if datasetname is defined %}
 	     value="{{datasetname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetname2" class="form-col-1">name 2:</label>
+    <div class="form-group">
+      <label for="datasetname2" class="form-label">name 2:</label>
       <input id="datasetname2" name="datasetname2" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetname2 is defined %}
 	     value="{{datasetname2}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetfullname" class="form-col-1">full name:</label>
+    <div class="form-group">
+      <label for="datasetfullname" class="form-label">full name:</label>
       <input id="datasetfullname" name="datasetfullname" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetfullname is defined %}
 	     value="{{datasetfullname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetshortname" class="form-col-1">short name:</label>
+    <div class="form-group">
+      <label for="datasetshortname" class="form-label">short name:</label>
       <input id="datasetshortname" name="datasetshortname" type="text"
-	     required="required" class="form-col-2"
+	     required="required" class="form-control"
 	     {%if datasetshortname is defined %}
 	     value="{{datasetshortname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="datasetpublic" class="form-col-1">public:</label>
+    <div class="form-group">
+      <label for="datasetpublic" class="form-label">public:</label>
       <input id="datasetpublic" name="datasetpublic" type="number"
 	     required="required" min="0" max="2"
 	     {%if datasetpublic is defined %}
@@ -121,10 +122,10 @@
 	     {%else%}
 	     value="0"
 	     {%endif%}
-	     class="form-col-2" />
-    </fieldset>
+	     class="form-control" />
+    </div>
 
-    <fieldset>
+    <div class="form-group">
       <label for="datasetconfidentiality">confidentiality:</label>
       <input id="datasetconfidentiality" name="datasetconfidentiality"
 	     type="number" required="required" min="0" max="2"
@@ -133,12 +134,12 @@
 	     {%else%}
 	     value="0"
 	     {%endif%}
-	     class="form-col-2" />
-    </fieldset>
+	     class="form-control" />
+    </div>
 
-    <fieldset>
-      <label for="datasetdatascale" class="form-col-1">data scale:</label>
-      <select id="datasetdatascale" name="datasetdatascale" class="form-col-2">
+    <div class="form-group">
+      <label for="datasetdatascale" class="form-label">data scale:</label>
+      <select id="datasetdatascale" name="datasetdatascale" class="form-control">
 	<option value="">None</option>
 	{%for dscale in datascales:%}
 	<option value="{{dscale}}"
@@ -151,17 +152,10 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" value="create new dataset"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">create new dataset</button>
   </form>
-
 </div>
 
 {%endblock%}
-
-{%block javascript%}
-{%endblock%}
diff --git a/qc_app/templates/select_platform.html b/qc_app/templates/select_platform.html
index d69a970..d9bc68f 100644
--- a/qc_app/templates/select_platform.html
+++ b/qc_app/templates/select_platform.html
@@ -5,58 +5,58 @@
 {%block contents%}
 <h2 class="heading">{{filename}}: select platform</h2>
 
-<form method="POST" action="{{url_for('dbinsert.select_study')}}"
-      id="select-platform-form" data-genechips="{{genechips_data}}">
-  <input type="hidden" name="filename" value="{{filename}}" />
-  <input type="hidden" name="filetype" value="{{filetype}}" />
-  <input type="hidden" name="totallines" value="{{totallines}}" />
+<div class="row">
+  <form method="POST" action="{{url_for('dbinsert.select_study')}}"
+        id="select-platform-form" data-genechips="{{genechips_data}}">
+    <input type="hidden" name="filename" value="{{filename}}" />
+    <input type="hidden" name="filetype" value="{{filetype}}" />
+    <input type="hidden" name="totallines" value="{{totallines}}" />
 
-  <fieldset>
-    <label for="species" class="form-col-1">species</label>
-    <select id="species" name="species" class="form-col-2">
-      {%for row in species:%}
-      <option value="{{row['SpeciesId']}}"
-	      {%if row["Name"] == default_species:%}
-	      selected="selected"
-	      {%endif%}>
-	{{row["MenuName"]}}
-      </option>
-      {%endfor%}
-    </select>
-  </fieldset>
+    <div class="form-group">
+      <label for="species" class="form-label">species</label>
+      <select id="species" name="species" class="form-control">
+        {%for row in species:%}
+        <option value="{{row['SpeciesId']}}"
+	        {%if row["Name"] == default_species:%}
+	        selected="selected"
+	        {%endif%}>
+	  {{row["MenuName"]}}
+        </option>
+        {%endfor%}
+      </select>
+    </div>
 
-  <table id="genechips-table">
-    <thead>
-      <tr>
-	<th>Select</th>
-	<th>GeneChip ID</th>
-	<th>GeneChip Name</th>
-      </tr>
-    </thead>
+    <table id="genechips-table" class="table">
+      <caption>select platform</caption>
+      <thead>
+        <tr>
+	  <th>Select</th>
+	  <th>GeneChip ID</th>
+	  <th>GeneChip Name</th>
+        </tr>
+      </thead>
 
-    <tbody>
-      {%for chip in genechips:%}
-      <tr>
-	<td>
-	  <input type="radio" name="genechipid" value="{{chip['GeneChipId']}}"
-		 required="required" />
-	</td>
-	<td>{{chip["GeneChipId"]}}</td>
-	<td>{{chip["GeneChipName"]}}</td>
-      </tr>
-      {%else%}
-      <tr>
-	<td colspan="5">No chips found for selected species</td>
-      </tr>
-      {%endfor%}
-    </tbody>
-  </table>
+      <tbody>
+        {%for chip in genechips:%}
+        <tr>
+	  <td>
+	    <input type="radio" name="genechipid" value="{{chip['GeneChipId']}}"
+		   required="required" />
+	  </td>
+	  <td>{{chip["GeneChipId"]}}</td>
+	  <td>{{chip["GeneChipName"]}}</td>
+        </tr>
+        {%else%}
+        <tr>
+	  <td colspan="5">No chips found for selected species</td>
+        </tr>
+        {%endfor%}
+      </tbody>
+    </table>
 
-  <fieldset>
-    <input type="submit" class="btn btn-primary form-col-2"
-	   value="submit platform" />
-  </fieldset>
-</form>
+    <button type="submit" class="btn btn-primary">submit platform</button>
+  </form>
+</div>
 {%endblock%}
 
 {%block javascript%}
diff --git a/qc_app/templates/select_study.html b/qc_app/templates/select_study.html
index e474c50..648ad4c 100644
--- a/qc_app/templates/select_study.html
+++ b/qc_app/templates/select_study.html
@@ -10,34 +10,36 @@
 {%block contents%}
 <h2 class="heading">{{filename}}: select study</h2>
 
-<div class="two-column-with-separator">
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.select_dataset')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col1">
-    <legend>Select from existing study</legend>
+    <legend class="heading">Select from existing study</legend>
     {{hidden_fields(filename, filetype, species=species, genechipid=genechipid,
     totallines=totallines)}}
 
-    <fieldset>
-      <label for="study" class="form-col-1">study:</label>
-      <select id="study" name="studyid" class="form-col-2">
+    <div class="form-group">
+      <label class="form-label" for="study">study:</label>
+      <select id="study" name="studyid" class="form-control">
 	{%for study in studies:%}
 	<option value="{{study['Id']}}">{{study["Name"]}}</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" value="submit selected study"
-	     class="btn btn-primary form-col-2"
-	     {%if studies | length == 0:%}
-	     disabled="disabled"
-	     {%endif%} />
-    </fieldset>
-  </form>
+    <button type="submit"
+	    class="btn btn-primary"
+	    {%if studies | length == 0:%}
+	    disabled="disabled"
+	    {%endif%} />submit selected study</button>
+</form>
+</div>
 
+<div class="row">
   <p class="two-col-sep-separator">OR</p>
+</div>
 
+<div class="row">
   <form method="POST" action="{{url_for('dbinsert.create_study')}}"
 	id="select-platform-form" data-genechips="{{genechips_data}}"
 	class="two-col-sep-col2">
@@ -50,22 +52,22 @@
     </ul>
     {%endif%}
     {%endwith%}
-    <legend>Create new study</legend>
+    <legend class="heading">Create new study</legend>
     {{hidden_fields(filename, filetype, species=species, genechipid=genechipid,
     totallines=totallines)}}
 
-    <fieldset>
-      <label for="studyname" class="form-col-1">name:</label>
-      <input type="text" id="studyname" name="studyname" class="form-col-2"
+    <div class="form-group">
+      <label class="form-label" for="studyname">name:</label>
+      <input type="text" id="studyname" name="studyname" class="form-control"
 	     required="required"
 	     {%if studyname:%}
 	     value="{{studyname}}"
 	     {%endif%} />
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="group" class="form-col-1">group:</label>
-      <select id="group" name="inbredsetid" class="form-col-2"
+    <div class="form-group">
+      <label class="form-label" for="group">group:</label>
+      <select id="group" name="inbredsetid" class="form-control"
 	      required="required">
 	<option value="">Select group</option>
 	{%for family in groups:%}
@@ -81,11 +83,11 @@
 	</optgroup>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <label for="tissue" class="form-col-1">tissue:</label>
-      <select id="tissue" name="tissueid" class="form-col-2"
+    <div class="form-group">
+      <label class="form-label" for="tissue">tissue:</label>
+      <select id="tissue" name="tissueid" class="form-control"
 	      required="required">
 	<option value="">Select type</option>
 	{%for tissue in tissues:%}
@@ -97,12 +99,9 @@
 	</option>
 	{%endfor%}
       </select>
-    </fieldset>
+    </div>
 
-    <fieldset>
-      <input type="submit" value="create study"
-	     class="btn btn-primary form-col-2" />
-    </fieldset>
+    <button type="submit" class="btn btn-primary">create study</button>
   </form>
 </div>
 
diff --git a/qc_app/templates/stdout_output.html b/qc_app/templates/stdout_output.html
index f3fcde5..85345a9 100644
--- a/qc_app/templates/stdout_output.html
+++ b/qc_app/templates/stdout_output.html
@@ -2,9 +2,7 @@
 
 <h4>STDOUT Output</h4>
 <div class="cli-output">
-  {%for line in job.get("stdout", "").split("\n\n"):%}
-  <p>{{line}}</p>
-  {%endfor%}
+  <pre>{{job.get("stdout", "")}}</pre>
 </div>
 
 {%endmacro%}