List-Group

  1. Elements
  2. List-Group
Basic List
  • img
    Alicia Sierra
  • img
    Samantha Mery
  • img
    Juliana Pena
  • img
    Adam Smith
  • img
    Farhaan Amhed
{BasicButtons.map((idx)=>(
<ListGroup.Item as="li" key={Math.random()}>
    <div className="d-flex align-items-center">
        <span className="avatar avatar-sm">
            <img src={idx.src} alt="img"/>
        </span>
        <div className="ms-2 fw-semibold">
            {idx.text}
        </div>
    </div>
</ListGroup.Item>
))}
Active items
  • Home
  • Notifications
  • Sent Messages
  • New Requests
  • Deleted Messages

                  <ListGroup as="ul"><ListGroup.Item as="li">
 <div className="d-flex align-items-center">
     <div>
         <span className="fs-15">
             <i className="bi bi-bell"></i>
         </span>
     </div>
     <div className="ms-2">
         Notifications
     </div>
 </div>
</ListGroup.Item>
</ListGroup>
Disabled items
  • A disabled item meant to be disabled
  • Simply dummy text of the printing
  • There are many variations of passages
  • All the Lorem Ipsum generators
  • Written in 45 BC. This book is a treatise on the theory
<ListGroup as="ul">
<ListGroup.Item as="li"className="list-group-item disabled" aria-disabled="true">A disabled item meant to be disabled
</ListGroup.Item>
<ListGroup.Item as="li">Simply dummy text of the printing</ListGroup.Item>
<ListGroup.Item as="li">There are many variations of passages</ListGroup.Item>
<ListGroup.Item as="li">All the Lorem Ipsum generators</ListGroup.Item>
<ListGroup.Item as="li">Written in 45 BC. This book is a treatise on the theory</ListGroup.Item>
 </ListGroup>
Flush
Asish Trivedhi(+1023-84534)
Alezander Russo(+7546-12342)
Karem Smith(+9944-56632)
Melissa Brien(+1023-34323)
Kamala Harris(+91-63421)
<ListGroup variant='flush' className="">
 <ListGroup.Item className="list-group-item fw-semibold"><i className="bi bi-envelope align-middle me-2 text-muted"></i>Asish Trivedhi<span className="ms-1 text-muted fw-normal d-inline-block">(+1023-84534)</span></ListGroup.Item>
 <ListGroup.Item className="list-group-item fw-semibold"><i className="bi bi-tiktok align-middle me-2 text-muted"></i>Alezander Russo<span className="ms-1 text-muted fw-normal d-inline-block">(+7546-12342)</span></ListGroup.Item>
 <ListGroup.Item className="list-group-item fw-semibold"><i className="bi bi-whatsapp align-middle me-2 text-muted"></i>Karem Smith<span className="ms-1 text-muted fw-normal d-inline-block">(+9944-56632)</span></ListGroup.Item>
 <ListGroup.Item className="list-group-item fw-semibold"><i className="bi bi-facebook align-middle me-2 text-muted"></i>Melissa Brien<span className="ms-1 text-muted fw-normal d-inline-block">(+1023-34323)</span></ListGroup.Item>
 <ListGroup.Item className="list-group-item fw-semibold"><i className="bi bi-instagram align-middle me-2 text-muted"></i>Kamala Harris<span className="ms-1 text-muted fw-normal d-inline-block">(+91-63421)</span></ListGroup.Item>
</ListGroup>
Links
C
California
N
New Jersey
L
Los Angeles
M
Miami Florida
W
Washington D.C
<ListGroup>
 <Link to="#" className="list-group-item list-group-item-action">
 <div className="d-flex align-items-center">
     <div>
         <span className="avatar avatar-xs bg-secondary avatar-rounded">
             N
         </span>
     </div>
     <div className="ms-2">New Jersey</div>
 </div>
</Link>
buttons
Simply dummy text of the printing243
There are many variations of passages35
All the Lorem Ipsum generators132
All the Lorem Ipsum generators2525
A disabled item meant to be disabled21
<ListGroup className="list-group">
<ListGroup.Item type="button" className="list-group-item list-group-item-action active" aria-current="true">Simply dummy text of the printing<span className="badge float-end bg-primary">243</span></ListGroup.Item>
<ListGroup.Item type="button" className="list-group-item list-group-item-action">There are many variations of passages<span className="badge float-end bg-secondary-transparent">35</span></ListGroup.Item>
<ListGroup.Item type="button" className="list-group-item list-group-item-action">All the Lorem Ipsum generators<span className="badge float-end bg-info-transparent">132</span></ListGroup.Item>
<ListGroup.Item type="button" className="list-group-item list-group-item-action">All the Lorem Ipsum generators<span className="badge float-end bg-success-transparent">2525</span></ListGroup.Item>
<ListGroup.Item type="button" className="list-group-item list-group-item-action" disabled>A disabled item meant to be disabled<span className="badge float-end bg-danger-transparent">21</span></ListGroup.Item>
</ListGroup>
Contextual classes
  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
 <ListGroup as="ul">
{ContextualButtons.map((idx)=>(
<ListGroup.Item as="li" variant={idx.class} key={Math.random()}>{idx.text}</ListGroup.Item>
))}</ListGroup>
Contextual classes with hover styles
A simple default list group itemA simple primary list group itemA simple secondary list group itemA simple success list group itemA simple danger list group itemA simple warning list group itemA simple info list group itemA simple light list group itemA simple dark list group item
 <ListGroup as="ul">
{ContextualButtons.map((idx)=>(
    <ListGroup.Item variant={idx.class} href="#" action className="list-group-item list-group-item-action">{idx.text}</ListGroup.Item>
))}</ListGroup>
Solid Colored Lists
  • A simple default list group item
  • A simple primary list group item
  • A simple secondary list group item
  • A simple success list group item
  • A simple danger list group item
  • A simple warning list group item
  • A simple info list group item
  • A simple light list group item
  • A simple dark list group item
 <ListGroup as="ul">
<ListGroup.Item className="list-group-item list-item-solid-primary">A simple primary list
group
item</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-secondary">A simple secondary
list
group item</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-success">A simple success list
group
item</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-danger">A simple danger list
group
item</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-warning">A simple warning list
group
item</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-info">A simple info list group
item
</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-light">A simple light list group
item
</ListGroup.Item>
<ListGroup.Item className="list-group-item list-item-solid-dark text-white">A simple dark list group
item
</ListGroup.Item> </ListGroup>
Custom content
Web page editors now use Lorem Ipsum?
3 days ago

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.

24,Nov 2022.
Richard McClintock, a Latin professor?
4 hrs ago

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.

30,Nov 2022.
It uses a dictionary of over 200 Latin words?
15 hrs ago

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

4,Nov 2022.
The standard Lorem Ipsum used since the 1500s?
45 mins ago

All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.

28,Oct 2022.
 <ListGroup as="ul">
 <ListGroup.Item  to="#" className="list-group-item list-group-item-action">
 <div className="d-flex w-100 justify-content-between">
     <h6 className="mb-1 fw-semibold">Richard McClintock, a Latin professor?</h6>
     <small className="text-muted">4 hrs ago</small>
 </div>
 <p className="mb-1">Contrary to popular belief, Lorem Ipsum is not simply random text.
  It has roots in a piece of classical Latin literature.</p>
 <small className="text-muted">30,Nov 2022.</small>
</ListGroup.Item> </ListGroup>
Sub headings
  1. What Happened?
    Many experts have recently suggested may exist.
    32 Views
  2. It Was Amazing!
    His idea involved taking red.
    52 Views
  3. News Is A Great Weapon.
    News can influence in many ways.
    1,204 Views
  4. majority have suffered.
    If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything.
    14 Views
 <ListGroup as="ol" numbered>
 {SubheadingsButtons.map((idx)=>(
<ListGroup.Item as="li" className="list-group-item d-flex justify-content-between align-items-start" key={Math.random()}>
     <div className="ms-2 me-auto text-muted">
         <div className="fw-semibold fs-14 text-default">{idx.text1}</div>
         {idx.text2}
     </div>
     <Badge bg={idx.class}>{idx.text3}</Badge>
 </ListGroup.Item>
 ))}</ListGroup>
Numbered Lists
  1. Simply dummy text of the printing.
  2. There are many variations of passages.
  3. All the Lorem Ipsum generators.
  4. Written in 45 BC. This book is a treatise on the theory.
  5. Randomised words which don't look.
  6. Always free from repetition, injected humour.
<ListGroup as="ol" numbered>
<ListGroup.Item as="li">Simply dummy text of the printing.</ListGroup.Item>
<ListGroup.Item as="li">There are many variations of passages.</ListGroup.Item>
<ListGroup.Item as="li">All the Lorem Ipsum generators.</ListGroup.Item>
<ListGroup.Item as="li">Written in 45 BC. This book is a treatise on the theory.</ListGroup.Item>
<ListGroup.Item as="li">Randomised words which don't look.</ListGroup.Item>
<ListGroup.Item as="li">Always free from repetition, injected humour.</ListGroup.Item>
 </ListGroup>
List With Checkboxes
  • Accurate information at any given point.
  • Hearing the information and responding.
  • Setting up and customizing your own sales.
  • New Admin Launched.
  • To maximize profits and improve productivity.
  • To have a complete 360° overview of sales information, having.
 <ListGroup as="ul">
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..." defaultChecked/>
        Accurate information at any given point.
</ListGroup.Item>
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..."/>
        Hearing the information and responding.
</ListGroup.Item>
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..." defaultChecked/>
        Setting up and customizing your own sales.
</ListGroup.Item>
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..." defaultChecked/>
        New Admin Launched.
</ListGroup.Item>
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..."/>
        To maximize profits and improve productivity.
</ListGroup.Item>
<ListGroup.Item as="li">
    <input className="form-check-input me-2 fw-semibold" type="checkbox" value=""
        aria-label="..."/>
        To have a complete 360° overview of sales information, having.
</ListGroup.Item>
</ListGroup>
List With Radios
Accurate information at any given point.
Hearing the information and responding.
Setting up and customizing your own sales.
New Admin Launched.
To maximize profits and improve productivity.
To have a complete 360° overview of sales information, having.
  <ListGroup className="list-group">
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio" defaultChecked/>
        Accurate information at any given point.
</ListGroup.Item>
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio" defaultChecked/>
        Hearing the information and responding.
</ListGroup.Item>
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio" defaultChecked/>
        Setting up and customizing your own sales.
</ListGroup.Item>
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio"/>
        New Admin Launched.
</ListGroup.Item>
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio"/>
        To maximize profits and improve productivity.
</ListGroup.Item>
<ListGroup.Item className="list-group-item">
    <input className="form-check-input me-1" type="radio" value=""
        name="list-radio"/>
        To have a complete 360° overview of sales information, having.
</ListGroup.Item>
</ListGroup>
List With badges
    GrociesAvailable
    FurnitureBuy
    Beauty32
    BooksNew
    ToysHot
    MobilesSold Out
{ListbadgesButtons.map((idx)=>(
<ListGroup.Item key={Math.random()}
    className="list-group-item d-flex justify-content-between align-items-center fw-semibold">
    {idx.text1}
    <Badge bg={idx.class} className={idx.color}>{idx.text2}</Badge>
</ListGroup.Item>
))}
Horizontal
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
<ListGroup as="ul" className="list-group list-group-horizontal-md">
<ListGroup.Item as="li">An item</ListGroup.Item>
<ListGroup.Item as="li">A second item</ListGroup.Item>
<ListGroup.Item as="li">A third item</ListGroup.Item>
</ListGroup>