Modal के Sizes
Modal size classes dialogs को small, large, या extra large, या full screen बनाती हैं।
In this page:
Syntax
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog modal-fullscreen">...</div>Modal Sizes
.modal-dialog में .modal-sm, .modal-lg, या .modal-xl add करें, या .modal-fullscreen (और .modal-fullscreen-md-down जैसे breakpoint versions) इस्तेमाल करें। .modal-dialog-centered से vertically centre करें। Default width screen size के हिसाब से adapt होती है।
Note:
modal-dialog-centered dialog को vertically centre करता है।
उदाहरण: Modal sizes
<!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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3">
<div class="container">
<button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#big">Large centred modal</button>
<div class="modal fade" id="big" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content"><div class="modal-body">This is a <b>large</b>, vertically centred modal.</div></div>
</div>
</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. #}
आम गलतियां
- modal-content पर size classes रखना
- vertical centering option भूल जाना
- fixed widths इस्तेमाल करना
चैप्टर सारांश
- dialog पर modal-sm, lg, xl
- full screen के लिए modal-fullscreen
- modal-dialog-centered centre करता है
- Sizes modal-dialog पर जाती हैं
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: