List group

import React from 'react';
import { ListGroup } from 'react-bootstrap';

const BasicExample = () => {
    const [open, setOpen] = useState(false);
  return (
    <ListGroup>
        <ListGroup.Item>Regular list group item</ListGroup.Item>
        <ListGroup.Item active>Active list group item</ListGroup.Item>
        <ListGroup.Item disabled>Disabled list group item</ListGroup.Item>
    </ListGroup>
  );
}

export default BasicExample;

import React from 'react';
import { ListGroup } from 'react-bootstrap';

const ListGroupFlush = () => {
  return (
    <ListGroup flush>
        <ListGroup.Item>Regular list group item</ListGroup.Item>
        <ListGroup.Item active>Active list group item</ListGroup.Item>
        <ListGroup.Item disabled>Disabled list group item</ListGroup.Item>
    </ListGroup>
  );
}

export default ListGroupFlush;

import React from 'react';
import { ListGroup } from 'react-bootstrap';

const ContextualClasses = () => {
  return (
    <ListGroup>
        <ListGroup.Item>This is a regular list group item</ListGroup.Item>
        <ListGroup.Item variant="primary">This is a primary list group item</ListGroup.Item>
        <ListGroup.Item variant="secondary">This is a secondary list group item</ListGroup.Item>
        <ListGroup.Item variant="success">This is a success list group item</ListGroup.Item>
        <ListGroup.Item variant="danger">This is a danger list group item</ListGroup.Item>
        <ListGroup.Item variant="warning">This is a warning list group item</ListGroup.Item>
        <ListGroup.Item variant="info">This is a info list group item</ListGroup.Item>
        <ListGroup.Item variant="light">This is a light list group item</ListGroup.Item>
        <ListGroup.Item variant="dark">This is a dark list group item</ListGroup.Item>
    </ListGroup>
  );
}

export default ContextualClasses;

l
import React from 'react';
import { ListGroup } from 'react-bootstrap';

const ContextualClassesInverse = () => {
  return (
    <ListGroup>
        <ListGroup.Item>This is a regular list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-primary">This is a primary list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-secondary">This is a secondary list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-success">This is a success list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-danger">This is a danger list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-warning">This is a warning list group item</ListGroup.Item>
        <ListGroup.Item className="list-group-inv list-group-inv-info">This is a info list group item</ListGroup.Item>
    </ListGroup>
  );
}

export default ContextualClassesInverse;

l
import React from 'react';
import { ListGroup } from 'react-bootstrap';

const ListGroupHorizontal = () => {
  return (
    <>
        <ListGroup horizontal>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
        <ListGroup horizontal='sm'>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
        <ListGroup horizontal='md'>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
        <ListGroup horizontal='lg'>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
        <ListGroup horizontal='xl'>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
        <ListGroup horizontal='xxl'>
            <ListGroup.Item>An item</ListGroup.Item>
            <ListGroup.Item>A second item</ListGroup.Item>
            <ListGroup.Item>A third item</ListGroup.Item>
        </ListGroup>
    </>
  );
}

export default ListGroupHorizontal;

l
import React from 'react';
import { Badge, ListGroup } from 'react-bootstrap';

const ListGroupWithBadges = () => {
  return (
    <ListGroup>
        <ListGroup.Item className="d-flex justify-content-between align-items-center">
            List group item one
            <Badge bg="primary" pill>14</Badge>
        </ListGroup.Item>
        <ListGroup.Item className="d-flex justify-content-between align-items-center">
            List group item two
            <Badge bg="primary" pill>2</Badge>
        </ListGroup.Item>
        <ListGroup.Item className="d-flex justify-content-between align-items-center">
            List group item three
            <Badge bg="primary" pill>1</Badge>
        </ListGroup.Item>
    </ListGroup>
  );
}

export default ListGroupWithBadges;

l
import React from 'react';
import { ListGroup } from 'react-bootstrap';
import { toast } from 'react-toastify';

const ActionableItems = () => {
  return (
    <ListGroup defaultActiveKey="#link1">
        <ListGroup.Item action href="#link1">
            Link 1
        </ListGroup.Item>
        <ListGroup.Item action href="#link2" disabled>
            Link 2
        </ListGroup.Item>
        <ListGroup.Item action onClick={() => toast("You clicked the third ListGroupItem")}>
            This one is a button
        </ListGroup.Item>
    </ListGroup>
  );
}

export default ActionableItems;

l
import React from 'react';
import { ListGroup } from 'react-bootstrap';

const CustomContents = () => {
  return (
    <ListGroup defaultActiveKey="#link1" >
        <ListGroup.Item action href="#link1" className="flex-column align-items-start">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small>3 days ago</small>
            </div>
            <p className="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>
        </ListGroup.Item>
        <ListGroup.Item action href="#link2" className="flex-column align-items-start">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small className="text-muted">3 days ago</small>
            </div>
            <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small className="text-muted">Donec id elit non mi porta.</small>
        </ListGroup.Item>
        <ListGroup.Item action href="#link3" className="flex-column align-items-start">
            <div className="d-flex w-100 justify-content-between">
                <h5 className="mb-1">List group item heading</h5>
                <small className="text-muted">3 days ago</small>
            </div>
            <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
            <small className="text-muted">Donec id elit non mi porta.</small>
        </ListGroup.Item>
    </ListGroup>
  );
}

export default CustomContents;

l
import React from 'react';
import { Col, ListGroup, Row } from 'react-bootstrap';

const LgWithIcons = () => {
  return (
    <Row>
        <Col md={6} className="m-md-0 mb-3">
            <ListGroup>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    List group item one
                    <i className="las la-exclamation-circle text-light fs-4" />
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    List group item two
                    <i className="las la-las la-user text-light fs-4" />
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    List group item three
                    <i className="las la-bell text-light fs-4" />
                </ListGroup.Item>
            </ListGroup>
        </Col>
        <Col md={6}>
            <ListGroup>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <span className="d-flex">
                        <i className="las la-exclamation-circle  fs-4 text-light me-2" />
                        List group item one
                    </span>
                    <span>12</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <span className="d-flex">
                        <i className="las la-las la-user  fs-4 text-light me-2" />
                        List group item two
                    </span>
                    <span>10</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <span className="d-flex">
                        <i className="las la-bell  fs-4 text-light me-2" />
                        List group item three
                    </span>
                    <span>1</span>
                </ListGroup.Item>
            </ListGroup>
        </Col>
    </Row>
  );
}

export default LgWithIcons;

l
import React from 'react';
import { Col, FormCheck, ListGroup, Row } from 'react-bootstrap';

const LgWithCheckbox = () => {
  return (
    <Row>
        <Col md={6} className="m-md-0 mb-3">
            <ListGroup>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Check this custom checkbox"
                        type="checkbox"
                        name="customCheck1"
                        id="customCheck1"
                        defaultChecked
                    />
                    <span>12</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Check this custom checkbox"
                        type="checkbox"
                        name="customCheck2"
                        id="customCheck2"
                        defaultChecked
                    />
                    <span>10</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Check this custom checkbox"
                        type="checkbox"
                        name="customCheck3"
                        id="customCheck3"
                        disabled
                    />
                    <span>15</span>
                </ListGroup.Item>
            </ListGroup>
        </Col>
        <Col md={6}>
            <ListGroup>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Toggle this custom radio"
                        type="radio"
                        name="customRadio"
                        id="customRadio1"
                        defaultChecked
                    />
                    <span>12</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Or toggle this other custom radio"
                        type="radio"
                        name="customRadio"
                        id="customRadio2"
                    />
                    <span>10</span>
                </ListGroup.Item>
                <ListGroup.Item className="d-flex justify-content-between align-items-center">
                    <FormCheck
                        label="Toggle this custom radio"
                        type="radio"
                        name="radioDisabled"
                        id="customradioDisabled"
                        disabled
                    />
                    <span>15</span>
                </ListGroup.Item>
            </ListGroup>
        </Col>
    </Row>
  );
}

export default LgWithCheckbox;

l
import React from 'react';
import { Col, ListGroup, Row, Tab } from 'react-bootstrap'

const TabbedInterface = () => {
  return (
    <Row>
        <Tab.Container id="list-group-tabs-example" defaultActiveKey="#home">
            <Col xs={4}>
                <ListGroup>
                    <ListGroup.Item action href="#home">
                        Home
                    </ListGroup.Item>
                    <ListGroup.Item action href="#profile">
                        Profile
                    </ListGroup.Item>
                    <ListGroup.Item action href="#messages">
                        Messages
                    </ListGroup.Item>
                    <ListGroup.Item action href="#settings">
                        Settings
                    </ListGroup.Item>
                </ListGroup>
            </Col>
            <Col xs={8}>
                <Tab.Content>
                    <Tab.Pane eventKey="#home">
                        Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
                    </Tab.Pane>
                    <Tab.Pane eventKey="#profile">
                        Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
                    </Tab.Pane>
                    <Tab.Pane eventKey="#messages">
                        Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
                    </Tab.Pane>
                    <Tab.Pane eventKey="#settings">
                        Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
                    </Tab.Pane>
                </Tab.Content>
            </Col>
        </Tab.Container>
    </Row>
  );
}

export default TabbedInterface;

import React from 'react';
import { ListGroup } from 'react-bootstrap'

const NumberedExample = () => {
  return (
    <ListGroup as="ol" numbered>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    </ListGroup>
  );
}

export default NumberedExample;