
React-Bootstrap ListGroup Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. ListGroup Componentprovides a way to display a series of content. It is a powerful and flexible component. We can use the following approach in ReactJS to use the react-bootstrap ListGroup Component.
ListGroup Props:
- activeKey: It is used to mark the ListGroup item as active.
- as: It can be used as a custom element type for this component.
- defaultActiveKey: It is used to indicate the default Active Key.
- horizontal: It is used to change the flow of the list group items to horizontal from its vertical alignment.
- onSelect: It is a callback that is triggered when a ListGroup item is selected.
- variant: It is used to add a variant to the list group.
- bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.
ListGroup.Item Props:
- action: It is used to marks the ListGroupItem as actionable.
- active: It is used to mark the ListGroup item as active.
- as: It can be used as a custom element type for this component.
- disabled: It is used to make the list item state as disabled.
- eventKey: It is used to uniquely identify for this component
- href: It is used to pass the href attribute for this element.
- onClick: It is a callback that is triggered when a ListGroup item is clicked.
- variant: It is used to add a variant to the list group item.
- bsPrefix:It is an escape hatch for working with strongly customized bootstrap CSS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldernameStep 3: After creating the ReactJS application, Install therequiredmodule using the following command:
npm install react-bootstrap npm install bootstrap
Project Structure: It will look like the following.

Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
Step to Run Application: Run the application using the following command from the root directory of the project:
npm startOutput: Now open your browser and go to http://localhost/, you will see the following output:
Reference:https://react-bootstrap.github.io/components/list-group/
List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
#Centers by default
#Linked
Set the or prop on , to create a linked or clickable element.
#Styling by state
Set the or prop to to mark or disable the item.
#Styling by color
Set the prop to style the item
#With header
Set the prop to create a structured item, with a heading and a body area.
#With custom component children
When using ListGroupItems directly, ListGroup looks at whether the items have href or onClick props to determine which DOM elements to emit. However, with custom item components as children to , set the prop to specify which element should output.
- Custom Child 1
- Custom Child 2
- Custom Child 3
#Props
#ListGroup[source]
Name | Type | Default | Description |
---|---|---|---|
componentClass | elementType | You can use a custom element type for this component. If not specified, it will be treated as if every child is a non-actionable , and otherwise. | |
bsClass | string | 'list-group' | Base CSS class and prefix for the component. Generally one should only change to provide new, non-Bootstrap, CSS styles for a component. |
#ListGroupItem[source]
Name | Type | Default | Description |
---|---|---|---|
active | any | ||
disabled | any | ||
header | node | ||
listItem | boolean | false | |
onClick | function | ||
href | string | ||
type | string | ||
bsStyle | one of: , , , | Component visual or contextual style variants. | |
bsClass | string | 'list-group-item' | Base CSS class and prefix for the component. Generally one should only change to provide new, non-Bootstrap, CSS styles for a component. |
Best JavaScript code snippets using react-bootstrap.ListGroupItem(Showing top 15 results out of )
React Bootstrap 5 List group component
List group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
Note: Read the API tab to find all available options and advanced customization
Basic example
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Active items
Add property to a to indicate the current active selection.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Disabled items
Add property to a to make it appear disabled. Note that some elements with will also require custom JavaScript to fully disable their click events (e.g., links).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Links and buttons
Use or property to create actionable list group items with hover, disabled, and active states by adding property. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like s or s) don’t provide a click or tap affordance.
Be sure to not use the standard classes here.
Links
Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Buttons
With s, you can also make use of the property. Sadly, s don’t support the disabled attribute.
Flush
Add property to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Horizontal
Add property to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant using to make a list group horizontal starting at that breakpoint’s . Currently horizontal list groups cannot be combined with flush list groups.
ProTip: Want equal-width list group items when horizontal? Add to each list group item.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Contextual classes
Use property to style list items with a stateful background and color.
- Dapibus ac facilisis in
- 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
property also works with property. Note the addition of the hover styles here not present in the previous example. Also supported is the state; apply it to indicate an active selection on a contextual list group item.
Dapibus ac facilisis inA 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
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.
Badges
Add badges to any list group item to show unread counts, activity, and more with the help of some flexbox utilities.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Custom content
Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.
Checkboxes
Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without s, but please remember to include an attribute and value for accessibility.
And if you want s as the property for large hit areas, you can do that, too.
List react bootstrap
React List Group - Bootstrap 4 & Material Design
React Bootstrap List Group
React Bootstrap list group is a flexible component which displays not only simple list of elements but complex custom content.
Basic example
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
Labels
Add labels to any list group item to show unread counts, activity, etc.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Linked items
Linkify list group items using the prop and an optional prop.
Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Links and buttons
To create actionable list group items with hover or disabled states use appropriate attributes, namely and .
Cras justo odio Dapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros
Contextual classes
Use prop to style list items.
- 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
Custom content
Add nearly any HTML within, even for linked list groups like the one below.
Best JavaScript code snippets using react-bootstrap.ListGroup.Item(Showing top 15 results out of )
You will also be interested:
- Bed crate frame
- Fbi weapon statistics
- Rv trader ohio
- Pataskala vision center
- Range query elasticsearch
- Powerbi javascript api
- Ebay half dollars
- Fidget cake ideas
- Honeywell fireproof box
- 99 urban dictionary
- Carson nissan dealer
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin
Overview#
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. Like overlays, Dropdowns are built using a third-party library Popper.js, which provides dynamic positioning and viewport detection.
Accessibility#
The WAIARIA standard defines a widget, but it's very specific to a certain kind of menu. ARIA menus, must only contain , , or .
On the other hand, Bootstrap's dropdowns are designed to more generic and application in a variety of situations. For this reason we don't automatically add the menu roles to the markup. We do implement some basic keyboard navigation, and if you do provide the "menu" role, react-bootstrap will do its best to ensure the focus management is compliant with the ARIA authoring guidelines for menus.
Examples#
Single button dropdowns#
The basic Dropdown is composed of a wrapping and inner , and . By default the will render a component and accepts all the same props.
<Dropdown>
<Dropdown.Togglevariant="success"id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>
<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>
<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
Since the above is such a common configuration react-bootstrap provides the component to help reduce typing. Provide a prop and some s and you're ready to go.
<DropdownButtonid="dropdown-basic-button"title="Dropdown button">
<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>
<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>
<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>
</DropdownButton>
DropdownButton will forward Button props to the underlying Toggle component
<>
{['Primary','Secondary','Success','Info','Warning','Danger'].map(
(variant)=>(
<DropdownButton
as={ButtonGroup}
key={variant}
id={`dropdown-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>
<Dropdown.ItemeventKey="3"active>
Active Item
</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
),
)}
</>
Split button dropdowns#
Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup.
<Dropdownas={ButtonGroup}>
<Buttonvariant="success">Split Button</Button>
<Dropdown.Togglesplitvariant="success"id="dropdown-split-basic"/>
<Dropdown.Menu>
<Dropdown.Itemhref="#/action-1">Action</Dropdown.Item>
<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>
<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
As with DropdownButton, is provided as convenience component.
<>
{['Primary','Secondary','Success','Info','Warning','Danger'].map(
(variant)=>(
<SplitButton
key={variant}
id={`dropdown-split-variants-${variant}`}
variant={variant.toLowerCase()}
title={variant}
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>
<Dropdown.ItemeventKey="3"active>
Active Item
</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>
</SplitButton>
),
)}
</>
Sizing#
Dropdowns work with buttons of all sizes.
<>
<divclassName="mb-2">
{[DropdownButton, SplitButton].map((DropdownType, idx)=>(
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="lg"
title="Drop large"
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>
<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}
</div>
<div>
{[DropdownButton, SplitButton].map((DropdownType, idx)=>(
<DropdownType
as={ButtonGroup}
key={idx}
id={`dropdown-button-drop-${idx}`}
size="sm"
variant="secondary"
title="Drop small"
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>
<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>
</DropdownType>
))}
</div>
</>
Dark dropdowns#
Opt into darker dropdowns to match a dark navbar or custom style by adding onto an existing . Alternatively, use when using the component.
<>
<Dropdown>
<Dropdown.Toggleid="dropdown-button-dark-example1"variant="secondary">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menuvariant="dark">
<Dropdown.Itemhref="#/action-1"active>
Action
</Dropdown.Item>
<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>
<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.Itemhref="#/action-4">Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<DropdownButton
id="dropdown-button-dark-example2"
variant="secondary"
menuVariant="dark"
title="Dropdown button"
className="mt-2"
>
<Dropdown.Itemhref="#/action-1"active>
Action
</Dropdown.Item>
<Dropdown.Itemhref="#/action-2">Another action</Dropdown.Item>
<Dropdown.Itemhref="#/action-3">Something else</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.Itemhref="#/action-4">Separated link</Dropdown.Item>
</DropdownButton>
</>
Using in a :
<Navbarvariant="dark"bg="dark"expand="lg">
<Containerfluid>
<Navbar.Brandhref="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Togglearia-controls="navbar-dark-example"/>
<Navbar.Collapseid="navbar-dark-example">
<Nav>
<NavDropdown
id="nav-dropdown-dark-example"
title="Dropdown"
menuVariant="dark"
>
<NavDropdown.Itemhref="#action/">Action</NavDropdown.Item>
<NavDropdown.Itemhref="#action/">Another action</NavDropdown.Item>
<NavDropdown.Itemhref="#action/">Something</NavDropdown.Item>
<NavDropdown.Divider/>
<NavDropdown.Itemhref="#action/">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
Drop directions#
Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the prop.
<>
<divclassName="mb-2">
{['up','down','start','end'].map((direction)=>(
<DropdownButton
as={ButtonGroup}
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={` Drop ${direction}`}
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2">Another action</Dropdown.Item>
<Dropdown.ItemeventKey="3">Something else here</Dropdown.Item>
<Dropdown.Divider/>
<Dropdown.ItemeventKey="4">Separated link</Dropdown.Item>
</DropdownButton>
))}
</div>
<div>
{['up','down','start','end'].map((direction)=>(
<SplitButton
key={direction}
id={`dropdown-button-drop-${direction}`}
drop={direction}
variant="secondary"
title={`Drop ${direction}`}
>
<Dropdown.ItemeventKey="1">Action</Dropdown.Item>
<Dropdown.ItemeventKey="2