Input के Groups
Input groups text, icons, या buttons को एक input के sides से attach करते हैं।
In this page:
Syntax
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control">
</div>Input Groups
एक input को .input-group में wrap करें और इससे पहले या बाद में .input-group-text या button elements add करें। Groups कई inputs hold कर सकते हैं और .input-group-lg जैसी size classes support करते हैं। Accessibility के लिए input से एक label associated रखें।
Note:
Labels को input group के बाहर रखें, अंदर नहीं।
उदाहरण: Input groups
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<label for="user" class="form-label">Username</label>
<div class="input-group mb-3"><span class="input-group-text">@</span><input id="user" class="form-control" placeholder="username"></div>
<div class="input-group"><input class="form-control" placeholder="Search" aria-label="Search"><button class="btn btn-outline-secondary">Go</button></div>
</div>
</body>
</html>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- input-group wrapper भूल जाना
- text को group के बाहर रखना
- accessible labels missing होना
चैप्टर सारांश
- .input-group controls wrap करता है
- input-group-text addons add करता है
- Buttons attach हो सकते हैं
- Size classes group पर apply होती हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: