<label>Ordered List</label>
<ol>
  <li>Eeeny</li>
  <li>Meeny</li>
  <li>Miney</li>
  <li>Moe</li>
</ol>
<hr>
<label>Unordered List</label>
<ul>
  <li>Eeeny</li>
  <li>Meeny</li>
  <li>Miney</li>
  <li>Moe</li>
</ul>
<hr>
<label>Unstyled lists - .list-unstyled</label>
<ul class="list-unstyled">
  <li>Eeeny</li>
  <li>Meeny</li>
  <li>Miney</li>
  <li>Moe</li>
</ul>
<hr>
<label>Inline lists - .list-inline</label>
<ul class="list-inline">
  <li>Eeeny</li>
  <li>Meeny</li>
  <li>Miney</li>
  <li>Moe</li>
</ul>
<hr>
<label>Benefits List - <strong>for best results use ul.list-unstyled</strong></label>
<ul class="list-unstyled">
  <li class="list-benefit">Fast!</li>
  <li class="list-benefit">Easy!</li>
  <li class="list-benefit">Cheap!</li>
  <li class="list-benefit">Porta ac consectetur ac</li>
  <li class="list-benefit">Vestibulum at eros</li>
</ul>
<hr>
<label>Ordered Roman List - for use in official policies, terms of service, etc</label>
<ol class="list-roman">
  <li>an “Account Originator” ...</li>
  <li>a “Guaranteed Member”...</li>
  <li>one or more “Account Managers”...</li>
  <li>a Guaranteed Account (formerly called a Permanent Account) </li>
  <li>a Free Account, (formerly called an Introductory (“Intro”) Account) by registering</li>
</ol>
<hr>
<label>List Groups</label>
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item"><%= fa_icon "image", text: "26 photos" %></li>
  <li class="list-group-item active">Dapibus ac facilisis in</li>
  <li class="list-group-item disabled">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac<span class="badge">14</span></li>
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<hr>
<label>List Group Links</label>
<div class="list-group">
  <a href="#" class="list-group-item">Cras justo odio</a>
  <a href="#" class="list-group-item active">Dapibus ac facilisis in <span class="badge">14</span></a>
  <a href="#" class="list-group-item disabled">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac<span class="badge">14</span></a>
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
<hr>
<label>List Group Account Settings Links</label>
<div class="panel panel-default panel-settings">
  <div class="panel-heading">
    <h3 class="panel-title"> <i class="fa fa-gear"></i> Account Settings</h3>
  </div>
  <div class="panel-body panel-body-settings">
    <div class="list-group list-group-settings_list">
      <a href="#" class="list-group-item list-group-item-settings_item" title="Email Address">Email Address</a>
      <a href="#" class="list-group-item list-group-item-settings_item active" title="Password">Password</a>
      <a href="#" class="list-group-item list-group-item-settings_item" title="User Profile">User Profile</a>
      <a href="#" class="list-group-item list-group-item-settings_item" title="My Ambassador">My Ambassador</a>
      <a href="#" class="list-group-item list-group-item-settings_item" title="Privacy Settings">Privacy Settings</a>
      <a href="#" class="list-group-item list-group-item-settings_item" title="Storage">Storage</a>
      <a href="#" class="list-group-item list-group-item-settings_item" title="Web Address">Web Address</a>
    </div>
  </div>
</div>
<label>Toggle List Group</label>
<ul class="list-group list-group-toggle">
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Photo Books</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">Hardbound (6)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Softbound (4)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Cards</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">Business Cards (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Die Cut (3)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Envelopes (3)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Flat Cards (3)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Folded Cards (4)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Calendars</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">Desk Calendars (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Wall Calendars (3)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Digital Scrapbooking</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">Page Prints (3)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Post Albums (1)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Wall Art</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">Canvas Prints (7)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Metal Prints (12)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Posters (4)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Mobile Cases</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">HTC (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">iPad (2)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">iPhone (4)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Samsung (2)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
  <li class="list-group-item">
    <div class="list-group-toggler">
      <a class="list-group-link" href="">Photo Gifts</a>
      <i class="fa fa-plus list-group-toggle-trigger"></i>
    </div>
    <ul class="list-group-item-child list-unstyled">
      <li class="list-group-item"><a class="list-group-link" href="">CD/DVD Case (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Coasters (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link list-group-link-is_active" href="">Dog Tags (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link list-group-link-is_active" href="">Mouse Pads (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Mugs (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Ornaments (5)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Photo T-Shirts (1)</a><input type="checkbox" style="display:none"></li>
      <li class="list-group-item"><a class="list-group-link" href="">Playing Cards (1)</a><input type="checkbox" style="display:none"></li>
    </ul>
  </li>
</ul>