### Usage
```js static
import {ListGroup} from 'react-bootify';
/* or */
import ListGroup from 'react-bootify/components/list-group';
```
### Basic example
The most basic list group is an unordered list with list items. Build upon it with the options that follow, or with your own CSS as needed.
```js
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
```
### Active items
Add **active** to a **ListGroup.Item** to indicate the current active selection.
```js
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
```
### Disabled items
Add **disabled** to a list group item to make it appear disabled.
```js
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
```
### Action items
Use **action** to create actionable list group items with hover, disabled, and active states.
```js
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state.index = 0;
}
select(index) {
this.setState({index:index});
}
render() {
return (
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
);
}
}
```
### Flush
Add **flush** to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
```js
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
```
### Contextual Items
Use the **color** property to style list items with a stateful background and color.
```js
Primary - Cras justo odio
Secondary - Dapibus ac facilisis in
Success - Morbi leo risus
Danger - Porta ac consectetur ac
Warning - Vestibulum at eros
Info - Sit rebum causae.
Light - At sale dicat
Dark - Ad eius prompta
```