Accordion
Accordion
Accordion in Bootstrap 5.3 is a UI component that allows you to organize and display collapsible content sections. It provides an intuitive way to present information in a compact and space-efficient manner.
The Accordion component consists of a series of collapsible panels, where each panel consists of a header and a body. The header serves as a clickable element that users can interact with to expand or collapse the corresponding panel's body content.
When a panel is expanded, its body content is revealed, and when it is collapsed, the content is hidden. Only one panel can be open at a time, meaning that when a panel is expanded, any other open panels will automatically collapse.
Bootstrap 5.3 provides a range of classes and JavaScript functionality to easily implement the Accordion component. By utilizing the appropriate CSS classes, you can customize the appearance of the accordion to match your design requirements.
Furthermore, Bootstrap 5.3 includes optional collapse animations, allowing for smooth and visually appealing transitions when expanding or collapsing panels.
The Accordion component in Bootstrap 5.3 is a valuable tool for creating organized and interactive content layouts, such as FAQs, product descriptions, or any scenario where you want to present information in a collapsible manner while optimizing space utilization.
Accordion in Bootstrap
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Accordion with Flush in Bootstrap
Accordion with Flush is a variation of the Accordion component in Bootstrap 5.3 that provides a sleek and seamless appearance by removing the borders and spacing between the panels. This design approach is often used to achieve a modern and streamlined look.
In an Accordion with Flush, the panels are aligned edge-to-edge, creating a continuous and visually cohesive accordion layout. The absence of borders and gaps between panels allows for a more fluid and integrated presentation of content.
By using the appropriate CSS classes provided by Bootstrap 5.3, you can easily implement the Accordion with Flush style. The classes typically involve adding the "accordion-flush" class to the parent container element of the accordion.
The functionality of the Accordion with Flush remains the same as the regular Accordion component. Each panel consists of a header and a body, and users can expand or collapse panels by interacting with the headers. Only one panel can be open at a time, and the collapse animation can still be applied for a smooth transition.
- accordion: This class should be added to the parent container of the Accordion component.
- accordion-item: This class is applied to each individual panel or item within the Accordion.
- accordion-header: This class should be added to the header element of each panel. It represents the clickable area that users can interact with to expand or collapse the panel.
- accordion-button: This class is added to the button element within the header. It indicates that it serves as a trigger for expanding or collapsing the panel.
- accordion-collapse: This class is added to the collapsible content container within each panel. It defines the area that expands or collapses when the panel is toggled.
- collapse: This class is used in conjunction with accordion-collapse to define the collapsible content within each panel.
- show: This class is applied to the accordion-collapse element when a panel is in the expanded state. It displays the content of the panel.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Accordion Always open in Bootstrap
Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum iusto corrupti enim quas doloribus ad, provident repellendus excepturi natus dignissimos modi distinctio porro reprehenderit voluptas, facere sequi nostrum illum quod?
Cards
Cards
Default Card
Ut in ea error laudantium quas omnis officia. Sit sed praesentium voluptas. Corrupti inventore consequatur nisi necessitatibus modi consequuntur soluta id. Enim autem est esse natus assumenda. Non sunt dignissimos officiis expedita. Consequatur sint repellendus voluptas. Quidem sit est nulla ullam. Suscipit debitis ullam iusto dolorem animi dolorem numquam. Enim fuga ipsum dolor nulla quia ut. Rerum dolor voluptatem et deleniti libero totam numquam nobis distinctio. Sit sint aut. Consequatur rerum in.Card with header and footer
Ut in ea error laudantium quas omnis officia. Sit sed praesentium voluptas. Corrupti inventore consequatur nisi necessitatibus modi consequuntur soluta id. Enim autem est esse natus assumenda. Non sunt dignissimos officiis expedita. Consequatur sint repellendus voluptas. Quidem sit est nulla ullam. Suscipit debitis ullam iusto dolorem animi dolorem numquam. Enim fuga ipsum dolor nulla quia ut. Rerum dolor voluptatem et deleniti libero totam numquam nobis distinctio. Sit sint aut. Consequatur rerum in.
Card with an image on left
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card with an image on top
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with an image on bottom
Some quick example text to build on the card title and make up the bulk of the card's content.
Card with titles, buttons, and links
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCarousel
Carousel
The Carousel plugin is a component for cycling through elements, like a slideshow. Plugins can be included individually "carousel.js" or "bootstrap.js" or "bootstrap.min.js" .
Slides only
With indicators
Carousel with fade transition
Add .carousel-fade to your carousel to animate slides with a fade transition instead of a slide.
With controls
With captions
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
Modal
Modal
The Modal plugin is a dialog box/popup window that is displayed on top of the current page
Basic Modal
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page
Disabled Backdrop
You can disable the backdrop by adding data-bs-backdrop="false" to .modal-dialog
Scrolling long content
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Modal Sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports..
Disabled Animation
For modals that simply appear rather than fade in to view, remove the .fade class from your .modal element
Spinners
Spinners
Border spinner
Use the border spinners for a lightweight loading indicator.
Colors
Alignment
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
Buttons
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
Growing spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Growing Color spinners
Sizes
Add .spinner-border-sm and .spinner-grow-sm to make a smaller spinner that can quickly be used within other components. Or, use custom CSS or inline styles to change the dimensions as needed.