---
title: React Bootstrap Accordion Component
name: Accordion with Bootstrap Styling
description: Learn how to create vertically collapsing Bootstrap-style accordions using CoreUI’s React components.
route: /components/accordion/
bootstrap_component: true
---

## How to use React Bootstrap Accordion component

Use CoreUI's React components styled with Bootstrap to build interactive and collapsible accordion sections.

<ExampleSnippet className="theme-bootstrap" component="AccordionExample" componentName="React Bootstrap Accordion" />

### Flush style

Add the `flush` prop to remove default borders, background colors, and border radius — making the accordion items align flush with their container, following Bootstrap’s visual style.

<ExampleSnippet className="theme-bootstrap" component="AccordionFlushExample" componentName="React Bootstrap Accordion" />

### Always open behavior

Use the `alwaysOpen` property to keep multiple accordion items expanded at the same time, mimicking Bootstrap’s multiple-item open functionality.

<ExampleSnippet className="theme-bootstrap" component="AccordionAlwaysOpenExample" componentName="React Bootstrap Accordion" />

## API reference

Refer to the API documentation for detailed descriptions of all the available props and components used to create Bootstrap-styled accordions in React.

- [&lt;CAccordion /&gt;](../api/#caccordion)
- [&lt;CAccordionBody /&gt;](../api/#caccordionbody)
- [&lt;CAccordionHeader /&gt;](../api/#caccordionheader)
- [&lt;CAccordionItem /&gt;](../api/#caccordionitem)