Javatpoint Logo
Javatpoint Logo

React Bootstrap ListGroup

The ListGroup component is used to create a list of items. It is a flexible component for rendering a series of content. It provides an easy and auto-adjustable layout for displaying multiple items.

To use the React Bootstrap ListGroup, use the <ListGroup> and <ListGroup.Item> component to define the list items.

The import statement of the ListGroup is as follows:

import ListGroup from 'react-bootstrap/ListGroup'

Consider the below example:

App.js:

Output:

React Bootstrap ListGroup

From the above output, we can see all the list items are aligned properly. The list items are used to create a list of groups, sidebar navigations, etc.

List Groups with Active Items

We can pass the active props to make a list item active. By default, it will be highlighted with blue background color and white text color. However, we can override the active class styling by overriding it in the custom CSS file.

Consider the below example:

Output:

React Bootstrap ListGroup

List Group with Disabled Items

The disabled prop is used to display an inactive list item. It will be grayed out. The disabled prop will prevent actions on the specified list item. The elements that are not disabled can have actions like an anchor, event handlers, etc.

Output:

React Bootstrap ListGroup

From the above output, we have disabled list item 2. It will be static and could not have any actions.

Flushed List

The flush variant removes the borders and rounded corners from the list of group items. It will render the list items edge-to-edge in a parent container. It works just like the flush in the cards.

Output:

React Bootstrap ListGroup

Numbered List

We can also render the list items as a numbered list by using the "numbered" and "as" prop in the component. We can use the "as" props as "ul" and "li" for better alignment of the items. It will allow better customization of the list group items.

Output:

React Bootstrap ListGroup

From the above output, we have rendered the list group items as a numbered list.

Colored List Items

We can customize the list of items as per our requirements. We can fill the background color to the list items by specifying the custom CSS classes or using the contextual variants provided by Bootstrap.

Output:

React Bootstrap ListGroup

We can add the predefined hover effect for every variant to our list items by specifying the action prop.

It will add the hover effect on every list item.

Tab group List Items

We can also use the list items as a tab group. The tabs are useful for rendering the different blocks on the same page.

The Tab component with the list group component is used to create a tab group.

Consider the below example:

App.js:

Output:

React Bootstrap ListGroup

From the above output, we have created a tab group using the list items and tab components. We can customize the layout of the tab group as per our requirements.

By navigating to item 2, the Item 2 content will be displayed in the right section bar.

Thus, we can precisely use the ListGroup component for different web layouts.







Youtube For Videos Join Our Youtube Channel: Join Now

Feedback


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA