Transitions

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.

Collapse

Basic Example

Add a collapse toggle animation to an element or component.

Smooth animations

If you're noticing choppy animations, and the component that's being collapsed has non-zero margin or padding, try wrapping the contents of your <Collapse> inside a node with no margin or padding, like the <div> in the example below. This will allow the height to be computed properly, so the animation can proceed smoothly.

Result

Loading...

Live Editor

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Collapse from 'react-bootstrap/Collapse'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click </Button> <Collapse in={open}> <div id="example-collapse-text"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </Collapse> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Collapse from 'react-bootstrap/Collapse';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </Collapse>
    </>
  );
}

export default Example;

Horizontal

Add a collapse toggle animation to an element or component to transition the width instead of height.

Smooth animations

If you're noticing choppy animations, and the component that's being collapsed has non-zero margin or padding, try wrapping the contents of your <Collapse> inside a node with no margin or padding, like the <div> in the example below. This will allow the height to be computed properly, so the animation can proceed smoothly.

Result

Loading...

Live Editor

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import Collapse from 'react-bootstrap/Collapse'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded={open} > click </Button> <div style={{ minHeight: '150px' }}> <Collapse in={open} dimension="width"> <div id="example-collapse-text"> <Card body style={{ width: '400px' }}> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </Card> </div> </Collapse> </div> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Collapse from 'react-bootstrap/Collapse';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        click
      </Button>
      <div style={{ minHeight: '150px' }}>
        <Collapse in={open} dimension="width">
          <div id="example-collapse-text">
            <Card body style={{ width: '400px' }}>
              Anim pariatur cliche reprehenderit, enim eiusmod high life
              accusamus terry richardson ad squid. Nihil anim keffiyeh
              helvetica, craft beer labore wes anderson cred nesciunt sapiente
              ea proident.
            </Card>
          </div>
        </Collapse>
      </div>
    </>
  );
}

export default Example;

Fade

Add a fade animation to a child element or component.

Result

Loading...

Live Editor

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Fade from 'react-bootstrap/Fade'; function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} aria-controls="example-fade-text" aria-expanded={open} > Toggle text </Button> <Fade in={open}> <div id="example-fade-text"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </div> </Fade> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Fade from 'react-bootstrap/Fade';

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-fade-text"
        aria-expanded={open}
      >
        Toggle text
      </Button>
      <Fade in={open}>
        <div id="example-fade-text">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
          labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </Fade>
    </>
  );
}

export default Example;

API

Collapse

Fade