Documentation
Collapse
Bootstrap includes a few general use CSS transitions that can be applied to a number of components. React Bootstrap, bundles them up into a few composable <Transition> components from react-transition-group, a commonly used animation wrapper for React.
Encapsulating animations into components has the added benefit of making them more broadly useful, as well as portable for using in other libraries. All React-bootstrap components that can be animated, support pluggable <Transition> components.
Example
Add a collapse toggle animation to an element or component.
<Button
onClick={() => setOpen1(!open1)}
aria-controls="example-collapse-text"
aria-expanded={open1}
className="d-inline mx-1 btn-margin"
>
Link With Href
</Button>
<Button
onClick={() => setOpen1(!open1)}
aria-controls="example-collapse-text"
aria-expanded={open1}
className="d-inline mx-1 btn-margin"
>
Button With Data-Bs-Target
</Button>
<Collapse in={open1}>
<div id="example-collapse-text" className="mt-4">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</Collapse>
Multiple targets
Add a fade animation to a child element or component.
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<Button
onClick={() => setOpen2(!open2)}
aria-controls="example-fade-text"
aria-expanded={open2}
className="d-inline mx-1 btn-margin"
>
Toggle First Element
</Button>
<Button
onClick={() => setOpen3(!open3)}
aria-controls="example-fade-text"
aria-expanded={open3}
className="d-inline mx-1 btn-margin"
>
Toggle Second Element
</Button>
<Button
onClick={() => { setOpen2(!open2); setOpen3(!open3); }}
aria-controls="example-fade-text"
aria-expanded={open3}
className="d-inline mx-1 btn-margin"
>
Toggle Both Elements
</Button>
<Row className="g-2 mt-3">
<Col>
<Fade in={open2}>
<Card>
<Card.Body>
<Card.Text>
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</Card.Text>
</Card.Body>
</Card>
</Fade>
</Col>
<Col>
<Fade in={open3}>
<Card>
<Card.Body>
<Card.Text>
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</Card.Text>
</Card.Body>
</Card>
</Fade>
</Col>
</Row>