Lists क्या हैं
Bootstrap list bullets हटा सकता है, items को inline रख सकता है, या lists को list groups में बदल सकता है।
In this page:
Syntax
<ul class="list-unstyled">
<li>item</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">item</li>
</ul>Lists
.list-unstyled bullets और left padding हटाता है, .list-inline-item वाला .list-inline items को एक row में रखता है, और .list-group एक list को .list-group-item entries वाले एक bordered component की तरह style करता है। Modifiers active, disabled, और coloured items add करते हैं।
Note:
list-group-flush cards के अंदर इस्तेमाल के लिए outer borders हटाता है।
उदाहरण: Lists
<!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">
<ul class="list-unstyled"><li>No bullets</li><li>Just text</li></ul>
<ul class="list-inline"><li class="list-inline-item">Home</li><li class="list-inline-item">About</li><li class="list-inline-item">Contact</li></ul>
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Regular item</li>
<li class="list-group-item disabled">Disabled item</li>
</ul>
</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. #}
आम गलतियां
- list-inline-item भूल जाना
- बिना items वाले non-list markup पर list-group इस्तेमाल करना
- inline CSS से bullets हटाना
चैप्टर सारांश
- list-unstyled bullets हटाता है
- list-inline और list-inline-item साथ चाहिए
- component lists के लिए list-group
- Modifiers states add करते हैं
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: