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:
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