About Lesson
Collapse with Forms & Nested Collapse
- .form-control → Bootstrap input field inside collapse
- data-bs-toggle=”collapse” → Toggles another collapse
Example: Collapsible Form
HTML
<div>
<button class="btn btn-dark" type="button" data-bs-toggle="collapse" data-bs-target="#loginForm">
Toggle Login Form
</button>
</div>
<div class="collapse mt-2" id="loginForm">
<div class="card card-body">
<form>
<input type="text" class="form-control mb-2" placeholder="Username">
<input type="password" class="form-control mb-2" placeholder="Password">
<button class="btn btn-primary">Login</button>
</form>
</div>
</div>
Explanation:
- Login form appears inside a collapsible div.
Output:
