Responsive Bootstrap 5 Compact FAQ Accordion Display
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Bootstrap 5 Compact FAQ Accordion Display</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
</head>
<body>
<section class="py-5">
<div class="container">
<div class="row justify-content-center text-center mb-3">
<div class="col-lg-8 col-xl-7">
<span class="text-muted">F.A.Q</span>
<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-5">
<span class="text-muted">Lorem ipsum dolor</span>
<h2 class="pb-4 fw-bold">Have Any Questions?</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur quidem eius cum voluptatum quasi delectus assumenda culpa.</p><a class="btn btn-primary btn-lg mt-3" href="#">Contact us</a>
</div>
<div class="col-md-7">
<div class="accordion" id="Questions-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="Questions-headingOne"><button aria-controls="Questions-collapseOne" aria-expanded="false" class="accordion-button collapsed bg-light" data-bs-target="#Questions-collapseOne" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
<div aria-labelledby="Questions-headingOne" class="accordion-collapse collapse" data-bs-parent="#Questions-accordion" id="Questions-collapseOne">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Questions-headingTwo"><button aria-controls="Questions-collapseTwo" aria-expanded="false" class="accordion-button collapsed bg-light" data-bs-target="#Questions-collapseTwo" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
<div aria-labelledby="Questions-headingTwo" class="accordion-collapse collapse" data-bs-parent="#Questions-accordion" id="Questions-collapseTwo">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Questions-headingThree"><button aria-controls="Questions-collapseThree" aria-expanded="false" class="accordion-button collapsed bg-light" data-bs-target="#Questions-collapseThree" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
<div aria-labelledby="Questions-headingThree" class="accordion-collapse collapse" data-bs-parent="#Questions-accordion" id="Questions-collapseThree">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="Questions-headingFour"><button aria-controls="Questions-collapseFour" aria-expanded="false" class="accordion-button collapsed bg-light" data-bs-target="#Questions-collapseFour" data-bs-toggle="collapse" type="button">
<div class="text-muted me-3">
<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
<div aria-labelledby="Questions-headingFour" class="accordion-collapse collapse" data-bs-parent="#Questions-accordion" id="Questions-collapseFour">
<div class="accordion-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Bootstrap 5 snippet provides a modern and compact FAQ accordion component with smooth animations. It offers a user-friendly way to organize and present frequently asked questions on your website. This accordion is fully responsive and uses the built-in functionality of Bootstrap 5, making it a reliable and easy-to-implement solution.
Key Features
- Responsive Design: The accordion automatically adapts its layout to different screen sizes, ensuring a consistent and user-friendly experience across desktops, tablets, and mobile devices.
- Compact Display: The design is clean and compact, allowing you to present a large number of questions and answers in a small amount of space without cluttering the page.
- Built-in Functionality: The accordion's expand and collapse functionality is handled by Bootstrap 5's own JavaScript, which provides smooth transitions without the need for custom code.
- Customizable Styling: Easily modify the appearance of the accordion using Bootstrap's extensive utility classes and Sass variables to match your website's design and branding.
Implementation
- Include Bootstrap 5: Ensure you have Bootstrap 5's CSS and JavaScript files linked in your project's
<head>and<body>sections, respectively. - Create the HTML Structure: Use Bootstrap's
accordionclass for the main container. Inside, createaccordion-itemdivs, each containing aaccordion-headerwith a button and anaccordion-collapsediv for the content. - Apply Bootstrap Classes: Utilize Bootstrap's CSS classes such as
accordion,accordion-item,accordion-header,accordion-button, andaccordion-collapse. Make sure to include thedata-bs-toggleanddata-bs-targetattributes for the JavaScript functionality to work. - Populate Content: Fill each accordion item with your own questions in the header and the corresponding answers in the collapsible body.
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
