Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Lists in Bootstrap 5
Lists: Bootstrap provides styling for ordered lists, unordered lists, description lists, and custom list components.
What are Lists in Bootstrap?
Bootstrap enhances standard HTML lists with additional styling options, including unstyled lists, inline lists, description lists, and list groups for better presentation.
Basic Lists
Unordered & Ordered Lists
Unordered List (Bullets)
- First list item
- Second list item
- Third list item
- Nested item 1
- Nested item 2
- Fourth list item
Ordered List (Numbers)
- First ordered item
- Second ordered item
- Third ordered item
- Nested ordered 1
- Nested ordered 2
- Fourth ordered item
Default Styling
- Default bullet points
- Standard spacing
- Browser defaults
With Bootstrap Classes
- List group item
- Styled with Bootstrap
- Custom spacing
Custom Numbering
- Item 10
- Item 11
- Item 12
<!-- Basic unordered list -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
<!-- Basic ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item
<ol>
<li>Nested item</li>
</ol>
</li>
</ol>
<!-- Starting from specific number -->
<ol start="10">
<li>Item 10</li>
<li>Item 11</li>
</ol>Unstyled Lists
Removing Default List Styles
Default List
- Has bullet points
- Default padding
- Left margin
Unstyled List
- No bullet points
- Clean appearance
- Perfect for footers
- Nested keeps styling
- Still has bullets
Unstyled List in Footer
<!-- Unstyled list -->
<ul class="list-unstyled">
<li>Item without bullet</li>
<li>Clean appearance</li>
<li>Perfect for navigation
<ul>
<li>Nested lists keep bullets</li>
</ul>
</li>
</ul>
<!-- In footer navigation -->
<footer>
<div class="row">
<div class="col-md-4">
<h6>Quick Links</h6>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none">Home</a></li>
<li><a href="#" class="text-decoration-none">About</a></li>
</ul>
</div>
</div>
</footer>Inline Lists
Horizontal List Items
Basic Inline List
- Home
- About
- Services
- Contact
Inline List with Separators
Inline List with Badges
- HTML
- CSS
- JavaScript
- React
- Bootstrap
Breadcrumb Style
- Home
- /
- Products
- /
- Electronics
- /
- Smartphones
<!-- Inline list -->
<ul class="list-inline">
<li class="list-inline-item">First item</li>
<li class="list-inline-item">Second item</li>
<li class="list-inline-item">Third item</li>
</ul>
<!-- With separators -->
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" class="text-decoration-none">Link 1</a>
</li>
<li class="list-inline-item text-muted">|</li>
<li class="list-inline-item">
<a href="#" class="text-decoration-none">Link 2</a>
</li>
</ul>
<!-- With badges -->
<ul class="list-inline">
<li class="list-inline-item">
<span class="badge bg-primary">Tag 1</span>
</li>
<li class="list-inline-item">
<span class="badge bg-success">Tag 2</span>
</li>
</ul>Description Lists
Definition Lists & Data Display
Basic Description List
- HTML
- HyperText Markup Language - structures web content
- CSS
- Cascading Style Sheets - styles web content
- JavaScript
- Programming language for web interactivity
Horizontal Description List
- Product Name
- Premium Smartphone X200
- Manufacturer
- TechCorp International
- Release Date
- January 15, 2024
- Price
- $999.99
$1,199.99 - Features
- 6.7" OLED Display
- 256GB Storage
- Triple Camera System
- 5G Connectivity
Inline Description List
- Status:
- Active
- Users:
- 1,245 registered
- Uptime:
- 99.9% this month
- Last Updated:
- 2 hours ago
<!-- Basic description list -->
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
<!-- Horizontal description list -->
<dl class="row">
<dt class="col-sm-3">Term</dt>
<dd class="col-sm-9">Definition</dd>
<dt class="col-sm-3">Another Term</dt>
<dd class="col-sm-9">Another Definition</dd>
</dl>
<!-- With nested content -->
<dl class="row">
<dt class="col-sm-3">Features</dt>
<dd class="col-sm-9">
<ul class="list-unstyled">
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
</dd>
</dl>List Groups
Basic List Groups
<!-- List group with links -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Active item
</a>
<a href="#" class="list-group-item list-group-item-action">
Regular item
</a>
<a href="#" class="list-group-item list-group-item-action disabled">
Disabled item
</a>
</div>
<!-- List group with buttons -->
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">
Button item
</button>
</div>Styled List Groups
List group item heading
3 days agoSome placeholder content in a paragraph.
And some small print.Another list item
1 week agoMore content here with additional details.
<!-- With badges -->
<div class="list-group">
<a href="#" class="list-group-item d-flex justify-content-between">
Item text
<span class="badge bg-primary rounded-pill">Count</span>
</a>
</div>
<!-- With custom content -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">Heading</h6>
<small>Time</small>
</div>
<p class="mb-1">Content paragraph</p>
<small>Footer text</small>
</a>
</div>Numbered List Groups
Ordered List Groups
- 14First itemContent for list item
- 8Second itemContent for second list item
- 5Third itemContent for third list item
- Complete user registrationDone
- Verify email addressPending
- Set up profileNot Started
- Add payment methodOptional
<!-- Numbered list group -->
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Heading</div>
Content text
</div>
<span class="badge bg-primary rounded-pill">Badge</span>
</li>
</ol>
<!-- With status badges -->
<ol class="list-group list-group-numbered">
<li class="list-group-item">
<div class="d-flex justify-content-between">
<span>Task description</span>
<span class="badge bg-success">Status</span>
</div>
</li>
</ol>Checkboxes & Radios in Lists
Interactive List Items
Checkbox List
Radio List
Mixed Selection List
<!-- Checkbox list -->
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Checkbox label
</label>
</div>
<!-- Radio list -->
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="radio" name="radioGroup">
Radio label
</label>
</div>
<!-- Complex list item -->
<div class="list-group">
<div class="list-group-item">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="item1">
<label class="form-check-label w-100" for="item1">
<div class="d-flex justify-content-between">
<span>Item title</span>
<span class="text-success">Price</span>
</div>
<small class="text-muted d-block">Description</small>
</label>
</div>
</div>
</div>Accessibility Considerations
Accessibility Best Practices for Lists
- Semantic markup: Use proper list elements (
<ul>,<ol>,<dl>) - Screen readers: Lists are announced with item count
- Interactive lists: Ensure keyboard navigation works
- Focus states: Visible focus indicators for interactive items
- ARIA labels: Use
aria-labeloraria-labelledbywhen needed - Color contrast: Ensure sufficient contrast for all states
Responsive Lists
Responsive List Groups
Responsive Inline List
- Mobile: Block
- Tablet: Inline
- Desktop: Inline
<!-- Responsive list group -->
<div class="list-group">
<a href="#" class="list-group-item d-flex flex-column flex-md-row">
<span class="fw-bold mb-1 mb-md-0 me-md-3">Title</span>
<small class="text-muted">Description</small>
</a>
</div>
<!-- Responsive inline list -->
<ul class="list-inline">
<li class="list-inline-item d-block d-md-inline">Item 1</li>
<li class="list-inline-item d-block d-md-inline">Item 2</li>
</ul>
<!-- Responsive description list -->
<dl class="row">
<dt class="col-12 col-md-3">Term</dt>
<dd class="col-12 col-md-9">Definition</dd>
</dl>