Basic
Use the accordion class to expand/collapse the
accordion content.
This is the first item's accordion
body.
It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
This is the second item's accordion
body.
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
This is the third item's accordion
body.
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_01" aria-expanded="true" aria-controls="demo_accordion_item_01">
Accordion Item #1
</button>
</h2>
<div id="demo_accordion_item_01" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_02" aria-expanded="false" aria-controls="demo_accordion_item_02">
Accordion Item #2
</button>
</h2>
<div id="demo_accordion_item_02" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_03" aria-expanded="false" aria-controls="demo_accordion_item_03">
Accordion Item #3
</button>
</h2>
<div id="demo_accordion_item_03" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Flush
Use accordion-flush class to remove the default
background-color, some borders, and some rounded corners to
render accordions edge-to-edge with their parent container.
This is the first item's accordion
body.
It is shown by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
This is the second item's accordion
body.
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
This is the third item's accordion
body.
It is hidden by default, until the collapse plugin
adds the appropriate classes that we use to style
each element. These classes control the overall
appearance, as well as the showing and hiding via
CSS transitions. You can modify any of this with
custom CSS or overriding our default variables.
It's also worth noting that just about any HTML
can go within the
.accordion-body,
though the transition does limit overflow.
<div class="accordion accordion-flush" id="demo_accordion_main_02">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_11" aria-expanded="true" aria-controls="demo_accordion_item_11">
Accordion Item #1
</button>
</h2>
<div id="demo_accordion_item_11" class="accordion-collapse collapse show" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_12" aria-expanded="false" aria-controls="demo_accordion_item_12">
Accordion Item #2
</button>
</h2>
<div id="demo_accordion_item_12" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_13" aria-expanded="false" aria-controls="demo_accordion_item_13">
Accordion Item #3
</button>
</h2>
<div id="demo_accordion_item_13" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_02">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with Icons
Use accordion-icon class to show custom icon at
accordion.
<div class="accordion accordion-icon" id="demo_accordion_main_03">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_31" aria-expanded="true" aria-controls="demo_accordion_item_31">
<i class="ri-code-line me-2"></i> Frontend Development
</button>
</h2>
<div id="demo_accordion_item_31" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_32" aria-expanded="false" aria-controls="demo_accordion_item_32">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_32" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_33" aria-expanded="false" aria-controls="demo_accordion_item_33">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_33" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_03">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Accordions without Icons
Use the .accordion-icon-none class to create
Bootstrap accordions without icons. This
class hides any default icons, giving your accordion a
cleaner look.
<div class="accordion accordion-icon-none" id="demo_accordion_main_04">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_41" aria-expanded="true" aria-controls="demo_accordion_item_41">
<span class="accordion-icon me-2">
<i class="ri-code-line"></i>
</span>
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_41" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_42" aria-expanded="false" aria-controls="demo_accordion_item_42">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_42" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_43" aria-expanded="false" aria-controls="demo_accordion_item_43">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_43" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_04">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Accordions with Plus Icon
Use the .accordion-with-plus class to add a
plus icon to your Bootstrap accordion.
Place the icon inside the .accordion-header to
indicate expand/collapse functionality.
Frontend Development focuses on
creating the visual aspects of a website or
application that users interact with. This
includes designing and implementing user
interfaces (UI) using HTML, CSS, and JavaScript.
For example, using Bootstrap to quickly style and
layout responsive components can significantly
streamline the development process.
Backend Development involves
server-side programming that powers the
functionalities behind the scenes of a website or
application. This includes working with databases,
server logic, and APIs. For instance, using
frameworks like Node.js or Django helps in
efficiently managing server-side operations and
handling data interactions.
Bootstrap Customizations allow
you to tailor the Bootstrap framework to better
fit your project’s needs. This can involve
overriding default Bootstrap variables using
custom CSS, or utilizing the Bootstrap theme
customizer. For example, you can adjust the color
scheme and spacing of Bootstrap components to
align with your branding guidelines and improve
the overall aesthetics of your application.
<div class="accordion accordion-with-plus" id="demo_accordion_main_06">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_61" aria-expanded="true" aria-controls="demo_accordion_item_61">
<span class="accordion-icon me-2">
<i class="ri-code-line"></i>
</span>
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_61" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_62" aria-expanded="false" aria-controls="demo_accordion_item_62">
<i class="ri-braces-line me-2"></i> Backend Development
</button>
</h2>
<div id="demo_accordion_item_62" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_63" aria-expanded="false" aria-controls="demo_accordion_item_63">
<i class="ri-paint-brush-line me-2"></i> Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_63" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_06">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with Left Icon with Plus Icon
Use the .accordion-with-left-icon class to add
an icon on the left of each accordion item.
Place your icon in an <i> tag within the
.accordion-header.
<div class="accordion accordion-with-plus accordion-with-left-icon" id="demo_accordion_main_07">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_71" aria-expanded="true" aria-controls="demo_accordion_item_71">
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_71" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_72" aria-expanded="false" aria-controls="demo_accordion_item_72">
Backend Development
</button>
</h2>
<div id="demo_accordion_item_72" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_73" aria-expanded="false" aria-controls="demo_accordion_item_73">
Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_73" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_07">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with theme color
Customize your Bootstrap accordion header with
theme colors by applying classes like
.accordion-primary or .text-white.
Frontend Development focuses on
creating the visual aspects of a website or
application that users interact with. This
includes designing and implementing user
interfaces (UI) using HTML, CSS, and JavaScript.
For example, using Bootstrap to quickly style and
layout responsive components can significantly
streamline the development process.
Backend Development involves
server-side programming that powers the
functionalities behind the scenes of a website or
application. This includes working with databases,
server logic, and APIs. For instance, using
frameworks like Node.js or Django helps in
efficiently managing server-side operations and
handling data interactions.
Bootstrap Customizations allow
you to tailor the Bootstrap framework to better
fit your project’s needs. This can involve
overriding default Bootstrap variables using
custom CSS, or utilizing the Bootstrap theme
customizer. For example, you can adjust the color
scheme and spacing of Bootstrap components to
align with your branding guidelines and improve
the overall aesthetics of your application.
<div class="accordion accordion-primary accordion-border-box" id="demo_accordion_main_08">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_81" aria-expanded="true" aria-controls="demo_accordion_item_81">
Frontend Development
</button>
</h2>
<div id="demo_accordion_item_81" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_82" aria-expanded="false" aria-controls="demo_accordion_item_82">
Backend Development
</button>
</h2>
<div id="demo_accordion_item_82" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_83" aria-expanded="false" aria-controls="demo_accordion_item_83">
Bootstrap Customizations
</button>
</h2>
<div id="demo_accordion_item_83" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_08">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordions with subtitle
Add subtitles to Bootstrap accordions by
including a <h6> or
<small> tag in the
.accordion-header. This provides extra context
for each section.
Frontend Development focuses on
creating the visual aspects of a website or
application that users interact with. This
includes designing and implementing user
interfaces (UI) using HTML, CSS, and JavaScript.
For example, using Bootstrap to quickly style and
layout responsive components can significantly
streamline the development process.
Backend Development involves
server-side programming that powers the
functionalities behind the scenes of a website or
application. This includes working with databases,
server logic, and APIs. For instance, using
frameworks like Node.js or Django helps in
efficiently managing server-side operations and
handling data interactions.
Bootstrap Customizations allow
you to tailor the Bootstrap framework to better
fit your project’s needs. This can involve
overriding default Bootstrap variables using
custom CSS, or utilizing the Bootstrap theme
customizer. For example, you can adjust the color
scheme and spacing of Bootstrap components to
align with your branding guidelines and improve
the overall aesthetics of your application.
<div class="accordion accordion-secondary accordion-border-box" id="demo_accordion_main_09">
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_91" aria-expanded="true" aria-controls="demo_accordion_item_91">
<div>
<p class="mb-0">Frontend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_91" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_92" aria-expanded="false" aria-controls="demo_accordion_item_92">
<div>
<p class="mb-0">Backend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_92" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_93" aria-expanded="false" aria-controls="demo_accordion_item_93">
<div>
<p class="mb-0">Bootstrap Customizations</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_93" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_09">
<div class="accordion-body">
...
</div>
</div>
</div>
</div>Accordion With Content
You can create an accordion with images in
Bootstrap by including <img> tags within
the .accordion-header section. This lets you
display images alongside text content, enhancing visual
appeal and information delivery.
Frontend Development
Press to expand
Frontend Development
Press to expand
Frontend Development focuses on
creating the visual aspects of a website or
application that users interact with. This
includes designing and implementing user
interfaces (UI) using HTML, CSS, and JavaScript.
For example, using Bootstrap to quickly style and
layout responsive components can significantly
streamline the development process.
Backend Development
Press to expand
Backend Development
Press to expand
Backend Development involves
server-side programming that powers the
functionalities behind the scenes of a website or
application. This includes working with databases,
server logic, and APIs. For instance, using
frameworks like Node.js or Django helps in
efficiently managing server-side operations and
handling data interactions.
Bootstrap Customizations
Press to expand
Bootstrap Customizations
Press to expand
Bootstrap Customizations allow
you to tailor the Bootstrap framework to better
fit your project’s needs. This can involve
overriding default Bootstrap variables using
custom CSS, or utilizing the Bootstrap theme
customizer. For example, you can adjust the color
scheme and spacing of Bootstrap components to
align with your branding guidelines and improve
the overall aesthetics of your application.
<div class="accordion accordion-border-box" id="demo_accordion_main_10">
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_100" aria-expanded="true" aria-controls="demo_accordion_item_100">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Frontend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_100" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Frontend Development</strong> focuses on creating the visual aspects of a website or application that users interact with. This includes designing and implementing user interfaces (UI) using HTML, CSS, and JavaScript. For example, using Bootstrap to quickly style and layout responsive components can significantly streamline the development process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_101" aria-expanded="false" aria-controls="demo_accordion_item_101">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Backend Development</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_101" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Backend Development</strong> involves server-side programming that powers the functionalities behind the scenes of a website or application. This includes working with databases, server logic, and APIs. For instance, using frameworks like Node.js or Django helps in efficiently managing server-side operations and handling data interactions.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#demo_accordion_item_103" aria-expanded="false" aria-controls="demo_accordion_item_103">
<div class="avatar-image avatar-lg me-3">
<img class="img-fluid rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
</div>
<div>
<p class="mb-0">Bootstrap Customizations</p>
<p class="fs-12 mb-0 mt-1">Press to expand</p>
</div>
</div>
</h2>
<div id="demo_accordion_item_103" class="accordion-collapse collapse" data-bs-parent="#demo_accordion_main_10">
<div class="accordion-body">
<strong>Bootstrap Customizations</strong> allow you to tailor the Bootstrap framework to better fit your project’s needs. This can involve overriding default Bootstrap variables using custom CSS, or utilizing the Bootstrap theme customizer. For example, you can adjust the color scheme and spacing of Bootstrap components to align with your branding guidelines and improve the overall aesthetics of your application.
</div>
</div>
</div>
</div>Nesting Accordions
With Bootstrap, you can create
nested accordions to organize content
hierarchically. To do this, simply place an
<accordion> component inside another
<accordion>. Make sure each nested
accordion has a unique ID for proper
functionality.
Set up your development environment by
installing necessary tools and frameworks like
Node.js, npm, and a code editor.
Install tools such as Node.js, npm,
and any code editor like VSCode.
Design UI using tools like Figma or Adobe XD.
Create Wireframe to plan the
application layout.
Code frontend components and perform regular
testing.
Follow best coding practices and use
frameworks like Bootstrap.
Install and configure backend environment.
Install server frameworks and
databases.
Develop and test APIs using tools like
Postman.
Use Postman to test API endpoints.
Collapse Example
You can use a link with the href attribute, or
a button with the data-bs-target attribute. In
both cases, the data-bs-toggle="collapse" is
required.
More Details
Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
<!-- Collapsible Trigger Area -->
<div class="d-inline-flex gap-2 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show" id="collapseExample">
<div class="card card-body mb-0">
<h5 class="card-title">More Details</h5>
<p class="card-text">
Here’s some extra information that might be useful. For example, if you’re reading about a product, you could find details about its features, user instructions, or any other interesting facts. This part is hidden by default and will appear when you click either of the buttons above.
</p>
</div>
</div>Horizontal Collapse
Use the collapse-horizontal class to make
elements slide open and closed horizontally, instead of
vertically. Make sure to set a specific
width on the child element that you want to
collapse.
This is some placeholder content for a horizontal
collapse. It's hidden by default and shown when you
click the button.
<!-- Collapsible Trigger Area -->
<div class="d-inline-flex gap-2 mb-3">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when you click the button.
</div>
</div>Collapse with Icon
Click the icon to toggle the collapse.
Read Less
Read More
This is some detailed content that gets revealed when
you click "Read More" and hidden when you click "Read
Less". Customize this text as needed for your
application.
<!-- Collapsible Trigger Area with Remix Icon -->
<div class="d-flex flex-wrap gap-5 align-items-center mb-3">
<button class="btn btn-primary icon-btn custom-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent">
<span class="icon-on">
<i class="ri-subtract-line"></i>
</span>
<span class="icon-off">
<i class="ri-add-line"></i>
</span>
</button>
<div class="custom-toggle fw-semibold d-flex align-items-center" data-bs-toggle="collapse" data-bs-target="#collapseContent" aria-expanded="false" aria-controls="collapseContent" role="button">
<span class="icon-on">
Read Less
<i class="ri-arrow-up-s-line ms-2"></i>
</span>
<span class="icon-off">
Read More
<i class="ri-arrow-down-s-line ms-2"></i>
</span>
</div>
</div>
<!-- Collapsible Content Area -->
<div class="collapse show" id="collapseContent">
<div class="card card-body mb-0">
This is some detailed content that gets revealed when you click "Read More" and hidden when you click "Read Less". Customize this text as needed for your application.
</div>
</div>Controlling Multiple Collapses
You can use a <button> or
<a> to control multiple collapsible
elements at once by using the same
data-bs-target or href attribute.
Similarly, a single <button> or
<a> can control multiple collapsible
elements if you use the same attribute value for all.
This is the content for the first section. It’s
hidden by default and will be shown when the
appropriate button is clicked.
This is the content for the second section. It’s
hidden by default and will be shown when the
appropriate button is clicked.
<!-- Collapsible Trigger Buttons -->
<div class="d-inline-flex gap-2 mb-3">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false" aria-controls="collapseOne">Toggle First Section</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Toggle Second Section</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo">Toggle Both Sections</button>
</div>
<!-- Collapsible Content Sections -->
<div class="row">
<div class="col">
<div class="collapse show multi-collapse" id="collapseOne">
<div class="card card-body mb-0">
This is the content for the first section. It’s hidden by default and will be shown when the appropriate button is clicked.
</div>
</div>
</div>
<div class="col">
<div class="collapse show multi-collapse" id="collapseTwo">
<div class="card card-body mb-0">
This is the content for the second section. It’s hidden by default and will be shown when the appropriate button is clicked.
</div>
</div>
</div>
</div>