List Groups & Panels

  1. Home
  2. Pages
  3. Page Title

List Groups

  • Cras justo odio
  • Discuss your requirements
  • Morbi leo risus
  • Discuss your requirements
  • Discuss your requirements

<ul class="list-group">
   <li class="list-group-item"> Cras justo odio</li>
   <li class="list-group-item"> Dapibus ac facilisis in</li>
   <li class="list-group-item"> Morbi leo risus</li>
   <li class="list-group-item"> Porta ac consectetur ac</li>
   <li class="list-group-item">Vestibulum at eros</li>
 </ul>

List Groups - Badges

  • 14 Cras justo odio
  • 2Discuss your requirements
  • 1 Morbi leo risus 

<ul class="list-group">
   <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
   </li>
  </ul>

Linked items

Cras justo odio Device assessment and repair enquiries Morbi leo risus Device assessment and repair enquiries Device assessment and repair enquiries 

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Button items


<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Disabled items

Cras justo odio Device assessment and repair enquiries Morbi leo risus Device assessment and repair enquiries Device assessment and repair enquiries 

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Contextual classes

  • Discuss your requirements
  • Cras sit amet nibh libero
  • Discuss your requirements
  • Discuss your requirements
Device assessment and repair enquiries Cras sit amet nibh libero Device assessment and repair enquiries Device assessment and repair enquiries 

<ul class="list-group">
  <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>
<div class="list-group">
  <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>

Custom content

List group item heading

An intermittent fault is easier to assess with a clear description. Note the steps that trigger it and any warning shown on the screen.

List group item heading

Ask what the repair includes, which parts are being replaced and what after-service cover applies. The team will explain the agreed work when your item is ready.

List group item heading

A repair quotation follows diagnosis. Parts, labour and any collection arrangements are confirmed with you before paid work proceeds.

 

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Panels

By default, all the .panel does is apply some basic border and padding to contain some content.

Basic panel example 

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel heading without title
Panel content

Panel title

Panel content 

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
Panel footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content 
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Panel with Tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

For phones, laptops and office equipment, ask about data handling and backup arrangements before handing over your device. Keep account passwords private.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

If there is no panel body, the component moves from panel header to table without interruption.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Panel with List Groups

Easily include full-width list groups within any panel.

Panel heading

Share your location and a working contact number when requesting collection. Availability and transport charges depend on the route and the equipment involved.

  • Cras justo odio
  • Discuss your requirements
  • Morbi leo risus
  • Discuss your requirements
  • Discuss your requirements

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>