Veterans Health Administration

Bootstrap Grid Code Sample

<div class="row">
 <div class="col-sm-6">
  <p>col-sm-6</p>
 </div>
 <div class="col-sm-6">
  <p>col-sm-6</p>
 </div>
</div>

Images

One of the most useful features of Twitter Bootstrap is the ease at making images responsive. All that is required is to add the class img-responsive. That's it. Also, to center an image add the class center-block. The Feature Story example shows additional ways to align images as well as how to use <figure> and  <figcaption> tags.  Keep in mind that align=left and align=right are deprecated tags in html5 and should NOT be used.

More than any other item images can negatively impact a site visitor's experience.  Unless you are providing images for download, images should never be more that 1000 pixels (px) wide at 96 dpi and kept under 200k in size.  Having a 4000px wide image at 300 dpi (print quality) and resized in code to 200px wide, does nothing but slow down the page  and on mobile networks can make your page useless. In addition to file size, the image should not be enlarged to fit an area and should be cropped to meet the needed size to ensure the visitor sees what you want them to see.

Bullets

Bulleted lists are a known issue with the new template and are being looked at. In the meantime you can use the class feature-list for unordered lists and feature-ol for ordered lists.

<ul class="feature-list">
 <li>Bullet 1</li>
 <li>Bullet 2</li>
 <li>Bullet 3</li>
</ul>

<ol class="feature-ol">
 <li>Bullet 1
  <ol>
   <li>Bullet 1</li>
   <li>Bullet 2</li>
   <li>Bullet 3</li>
  </ol>
 </li>
 <li>Bullet 2</li>
 <li>Bullet 3</li>
</ol>

<ol class="feature-ol-numeric">
 <li>Bullet 1
  <ol>
   <li>Bullet 1</li>
   <li>Bullet 2</li>
   <li>Bullet 3</li>
  </ol>
 </li>
 <li>Bullet 2</li>
 <li>Bullet 3</li>
</ol>

<ol class="feature-ol-alpha">
 <li>Bullet 1
  <ol>
   <li>Bullet 1</li>
   <li>Bullet 2</li>
   <li>Bullet 3</li>
  </ol>
 </li>
 <li>Bullet 2</li>
 <li>Bullet 3</li>
</ol>

Blockquotes

Standard Blockquote

<blockquote>
 Standard Blockquote
</blockquote>

Feature story blockquote using class feature-blockquote. Can be used anywhere within health. Stephen Walker

<blockquote class="feature-blockquote">
 Feature story blockquote using class feature-blockquote. Can be used anywhere within health.
 <cite>Stephen Walker</cite>
</blockquote>

Panels

<div class="panel panel-va-navy">
 <div class="panel-heading">
  <strong>Panel Title</strong>
 </div>
 <div class="panel-body">
  Panel body text.
 </div>
 <div class="panel-footer">
  Footer is optional
 </div>
</div>

List Group

List groups are a nice feature, but some of the styles in the VA template cause problems with the basic list. This one is a div based list and has been updated to use the VA website blue for the header.

Note: This style has been added to the VAMC 2014 Styles and should be available to all VHA sites.

<div class="va-list-group">
 <a href="#" class="va-list-group-item active">List Item #1</a>
 <a href="#" class="va-list-group-item">List Item #2</a>
 <a href="#" class="va-list-group-item">List Item #3</a>
 <a href="#" class="va-list-group-item">List Item #4</a>
 <a href="#" class="va-list-group-item">List Item #5</a>
</div>

<div class="vam-list-group">
 <a href="#" class="vam-list-group-item active">List Item #1</a>
 <a href="#" class="vam-list-group-item">List Item #2</a>
 <a href="#" class="vam-list-group-item">List Item #3</a>
 <a href="#" class="vam-list-group-item">List Item #4</a>
 <a href="#" class="vam-list-group-item">List Item #5</a>
</div>

Tables

Bootstrap provides some excellent styling out of the box.

Basic Table

Bordered Table

Border with Striping

Border with Striping and Hover Feature

Condensed (reduced padding), Border, Striping, and Hover

<table class="table table-condensed table-bordered table-striped table-hover">
<caption class="table-caption">This is a table caption</caption>
<thead>
 <tr>
  <th scope="col">Name</th>
  <th scope="col">Position</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>text</td>
  <td>text</td>
 </tr>
</tbody>
</table>

Table style created by Chris Desrocher (class="data")