Disable Preloader

### List Groups & Panels

#### List Groups

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

    <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
- 2 Dapibus ac facilisis in
- 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 Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

    <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 Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

    <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

- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

    <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

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

#### List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

    <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

    <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

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# | 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

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

    <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>