Search code examples
reactjsbootstrap-accordion

How to remove the border on boostrap accordion

I am building a dashboard, the sidebar should have a dropdown list, I am finding it difficult using boostrap accordion. I want to remove the border that came with the accordion, here is my code:

<li className='sidebar-list-item w-100 border-0'>
                <Accordion className="border-0">
                    <Accordion.Item eventKey="0">
                        <Accordion.Header><i className="fas fa-chart-bar text-green"></i> <span>L T S</span></Accordion.Header>
                        <Accordion.Body>
                            <p>New LTS</p>
                            <p>My LTS</p>
                        </Accordion.Body>
                        </Accordion.Item>
                </Accordion>
            </li>`enter code here`
Solution

  • You can do this in your CSS file.

    Using an external CSS file (e.g., App.css)

    App.css

    .sidebar-list-item .accordion-button {
  border: none; /* Remove the border */
}