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 "code" tag).</p> </div> <!-- end column --> </div> <!-- end row --> <h2>Section with a picture and caption</h2> <p> Use the "img" tag to include the picture file, which is typically in .jpg or .png format. Images should normally have their "width" and "height' attributes set in the -"img" element. To right-align the image add the "gbsAlignRight" class. +"img" element. The caption is a "p" element, which is assigned the "gbsCaption" class. +To center the image, wrap it in a 'div' or 'p' element, and add the +bootstrap "text-center" 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 "gbsInlineImg" 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" -->