React Bootstrap Collapse Example

This article goes in detailed on react bootstrap collapse example. you will learn how to use bootstrap collapse in react. you will learn react-bootstrap collapse example. we will help you to give example of react bootstrap panel collapse example.

I will show you how to use bootstrap collapse in react application. you have to just simple follow few step to done simple example of bootstrap collapse in react js. in this example we will install react-bootstrap and use their collapse class to collapse modal in react app.

just follow few step to add bootstrap collapse in react native app.

Preview:

Install react-bootstrap

Now here, we have to install bootstrap using npm react-bootstrap command. so let's run bellow command to install bootstrap in react.

npm install react-bootstrap bootstrap

After successfully install bootstrap, we need to import bootstrap css in src/index.js file as like bellow:

import 'bootstrap/dist/css/bootstrap.css';

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
   
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();

Bootstrap Collapse Code

in our App.js file, we will write code for open simple bootstrap 4 collapse using react-bootstrap library.

Import Button, Collapse from react-bootstrap library.

let's add bellow code:

src/App.js

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import { Button, Collapse } from 'react-bootstrap';
   
function App() {
  const [open, setOpen] = useState(false);
   
  return (
    <div className="container">
      <h1>React Bootstrap Collapse Example - ItSolutionStuff.com</h1>
   
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
      >
        Click to Collapse
      </Button>
   
      <Collapse in={open}>
        <div id="example-collapse-text" >
          <div className="card card-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </Collapse>
   
    </div>
  );
}
   
export default App;

Now we are ready to run our example by bellow command:

npm start

Now you can check it. it's layout as like above.

I hope it can help you...