# List Group

### Default Style

{% tabs %}
{% tab title="Defaut" %}
![](/files/-LuqHbBqaxJImFReEeeL)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- 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>
<!-- /list group -->
```

{% endtab %}
{% endtabs %}

### Active item Style

{% tabs %}
{% tab title="Active Item" %}
![](/files/-LuqI21MMkPmhrQinI0_)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- List Group -->
<ul class="list-group">
    <li class="list-group-item active">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 group -->
```

{% endtab %}
{% endtabs %}

### Disable item Style

{% tabs %}
{% tab title="Disable Item" %}
![](/files/-LuqIffCcaZYKI0HNPKC)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- List Group -->
<ul class="list-group">
    <li class="list-group-item disabled">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 group -->
```

{% endtab %}
{% endtabs %}

### Links & Button Style

{% tabs %}
{% tab title="Link & Button" %}
![](/files/-LuqJiZspWbSZdnv4HLP)
{% endtab %}

{% tab title="Source Code" %}

#### Links Style

```markup
<!-- List Group -->
<div class="list-group">
    <a href="javascript:void(0)" class="list-group-item list-group-item-action active">Cras justo odio</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action">Morbi leo risus</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
<!-- /list group -->
```

#### Buttons Style

```markup
<!-- List Group -->
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">Cras justo odio</button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>
<!-- /list group -->
```

{% endtab %}
{% endtabs %}

### Flush Style

{% tabs %}
{% tab title="Flush" %}
![](/files/-LuqM1fbIwkqf3DSlfAO)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- List Group -->
<ul class="list-group list-group-flush">
    <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 group -->
```

{% endtab %}
{% endtabs %}

### Badge Style

{% tabs %}
{% tab title="Badge" %}
![](/files/-LuqMSX16l4ELcFZFxYk)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- List Group -->
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge badge-primary badge-pill">1</span>
    </li>
</ul>
<!-- /list group -->
```

{% endtab %}
{% endtabs %}

### Custom Style

{% tabs %}
{% tab title="Custom" %}
![](/files/-LuqM_QiCmI4Pwg0qg5P)
{% endtab %}

{% tab title="Source Code" %}

```markup
<!-- List Group -->
<div class="list-group">
    <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start active">
        <div class="d-flex w-100 justify-content-between">
            <h3 class="mb-1 text-white">List group item heading</h3>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
    </a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h3 class="mb-1">List group item heading</h3>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h3 class="mb-1">List group item heading</h3>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small class="text-muted">Donec id elit non mi porta.</small>
    </a>
</div>
<!-- /list group -->
```

{% endtab %}
{% endtabs %}

### Contextual classes Style

{% tabs %}
{% tab title="Contextual" %}
![](/files/-LuqOo0nKmRDASKcpt1y)
{% endtab %}

{% tab title="Source Code" %}

#### Contextual classes Style

```markup
<!-- List Group -->
<ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
    <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
    <li class="list-group-item list-group-item-success">A simple success list group item</li>
    <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
    <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
    <li class="list-group-item list-group-item-info">A simple info list group item</li>
    <li class="list-group-item list-group-item-light">A simple light list group item</li>
    <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
<!-- /list group -->
```

#### Contextual classes Link Style

```markup
<!-- List Group -->
<div class="list-group">
    <a href="javascript:void(0)" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
    <a href="javascript:void(0)" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
<!-- /list group -->
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-drift.g-axon.work/components/list-group.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
