Card-Based Layout
Utilizing Bootstrap’s card component, you can create an aesthetically pleasing FAQ section where each question and answer pair is presented within a distinct card. This approach offers flexibility in design and customization.
Example: The below code example is a practical implementation of Card layout to create a FAQ section.
HTML
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Card-Based Layout</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" crossorigin="anonymous" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"></head><body> <div class="container rounded h-75 w-25 m-5 p-5 text-light bg-success"> <h1>FAQ</h1> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">What is UPI?</h5> <p class="card-text"> Unified Payments Interface (UPI) is a real-time payment system that allows users to send and receive money from one bank account to another instantly and for free. </p> <a href="#" class="card-link">Read More</a> <a href="#" class="card-link">Website</a> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"> </script></body></html> |
Output:
GIF of Card Component – Example 2
How to create a FAQ Section in Bootstrap ?
An FAQ(Frequently Asked Questions) section serves as a valuable resource for users, providing them with the information they need in a convenient and accessible manner while also benefiting the organization by reducing support overhead and enhancing user satisfaction.
Table of Content
- Using Accordion Component
- Collapsible Panels
- Card-Based Layout
Contact Us