411831bf726f5fb440a96fd00cbc7614f462e0e4
kate
  Thu Feb 9 12:21:39 2017 -0800
Add instructions for how to center an image using bootstrap class 'text-center'. refs #18504

diff --git src/hg/htdocs/template.html src/hg/htdocs/template.html
index 8e576e4..70880ab 100755
--- src/hg/htdocs/template.html
+++ src/hg/htdocs/template.html
@@ -147,30 +147,31 @@
 
 <pre><code>sudo -i
 bash browserSetup.sh install</code></pre>
 
     <p>
     And here is some text with a <code>bit of code</code> embedded (just the &quot;code&quot; 
     tag).</p>
 
   </div> <!-- end column -->
 </div>   <!-- end row -->
 
 <h2>Section with a picture and caption</h2>
 <p>
 Use the &quot;img&quot; tag to include the picture file, which is typically in .jpg or .png format.
 Images should normally have their &quot;width&quot; and &quot;height' attributes set in the
-&quot;img&quot; element. To right-align the image add the &quot;gbsAlignRight&quot; class.
+&quot;img&quot; element. 
 The caption is a &quot;p&quot; element, which is assigned the &quot;gbsCaption&quot; class.
+To center the image, wrap it in a 'div' or 'p' element, and add the
+bootstrap &quot;text-center&quot; class to the wrapper element (also adding to a caption if present).
+</p>
+<p>
 In the special case where an image is used as a character/symbol embedded inline in
 a paragraph, add the class &quot;gbsInlineImg&quot; to the image tag, i.e. here's the wrench 
 (<img class="gbsInlineImg" src="images/wrench.png">).</p>
-<div class="row">
-  <div class="col-md-12">
-    <img src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299"> 
-    <p class="gbsCaption">
-    Browser staff in native habitat.</p>
-  </div>
-</div>
+<p class='text-center'>
+  <img class='text-center' src="images/gbstaff16.jpg" alt="Genome Browser staff" width="499" height="299"> 
+  <p class='gbsCaption text-center'>Browser staff in native habitat.</p>
+</p>
 
 <!--#include virtual="$ROOT/inc/gbPageEnd.html" -->