Lists
Vertical lists built from list-group items: media, content, meta and actions in one row.
Text only
A plain list-group-item holds one line of text.
Inbox
Sent
Archive
Trash
Title and description
Put list-group-item-title and list-group-item-description in list-group-item-content.
Inbox
Messages waiting for a reply
Sent
Everything you have sent
Archive
Closed conversations
Trash
Removed after 30 days
With icon
The list-group-item-media slot holds an icon before the content.
Inbox
Messages waiting for a reply
Sent
Everything you have sent
Archive
Closed conversations
Trash
Removed after 30 days
With avatar
The media slot takes an avatar the same way.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
With meta
Use list-group-item-meta for a time, a count or a badge at the end.
Inbox
Messages waiting for a reply
Sent
Everything you have sent
Archive
Closed conversations
Trash
Removed after 30 days
All slots
Media, content, meta and list-group-item-actions in one item.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Links
Add list-group-item-action to a link item. It supports active and disabled.
Actions on hover
In a list-group-hoverable list the actions show on hover. Add show to keep them visible.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Buttons
The actions slot holds any control, for example a button.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Checkboxes
In a list-group-selectable list a checked list-group-selectable-check marks its item.
Radios
Radio inputs with one name make a single choice list. Use a label as the item.
Switches
Put a switch in the actions slot to build a settings list.
Wrapped description
Add align-items-start to the item and text-wrap to the description for longer text.
Paweł Kuna
The new list layout works well on the dashboard. Can we use the same slots for the search results?
Jeffie Lewzey
Yes, the results only need a wrapped description and the avatar aligned to the top.
Mallory Hulme
Done. I also added the nested items to the sidebar.
Nested items
Put list-group-nested on a collapse after the parent item. list-group-item-toggle turns the chevron.
Drag handle
Add data-sortable to the list and put the handle in the media slot.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Default
Without a size class the items use the default padding.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Small
Add list-group-sm for a compact list.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Large
Add list-group-lg for more room around each item.
Paweł Kuna
UI Designer
Jeffie Lewzey
Chemical Engineer
Mallory Hulme
Geologist IV
Dunn Slane
Research Nurse
Notifications
Unread
New order received
Order #12345 has been placed by John Doe
Unread
Payment failed
Payment for order #12340 failed. Please review payment details.
Unread
System maintenance
Scheduled maintenance will begin in 2 hours. Expected downtime: 30 minutes.
Read
New customer registered
Sarah Johnson has created a new account
Transactions
Aprilynne Pills
Refund for cancelled prescription
Google Limited UK
Google Ads campaign payment
Github Inc.
GitHub Pro subscription
Netflix
Monthly streaming subscription
Files
Annual report 2025.pdf
2.4 MB
Budget forecast.xlsx
318 kB
Office photos.zip
48 MB
Meeting notes.md
4 kB
Visits by country
United States
Germany
Poland
Japan
Inside a card body
Without list-group-flush the list keeps its own border and rounded corners.
Annual report 2025.pdf
Budget forecast.xlsx
Office photos.zip
Loading
Empty
No messages
New messages from your team show up here.
Contacts
Christabel Charlwood
Compressed Sass output support (#29702)
Haskel Shelper
Set vertical-align on .form-check-input (#29521)
Lorry Mion
Keep themed appearance for print (#29714)
Leesa Beaty
Use double quotes in `.stylelintrc` (#29709)
Perren Keemar
Regenerate package-lock.json (#29695)
Sunny Airey
Switch to the Coveralls Action (#29478)
Geoffry Flaunders
Fix npm audit vulnerability (#29677)
Thatcher Keel
config.yml: update popper.js to v1.16.0 (#29624)
Last commits
People
A
Sunny Airey
Change deprecated html tags to text decoration classes (#29604)
Arlie Armstead
justify-content:between ⇒ justify-content:space-between (#29734)
B
Cary Baleine
Update change-version.js (#29736)
Leesa Beaty
Regenerate package-lock.json (#29730)
Tallie Bettis
Some minor text tweaks
Errol Blackley
Link to versioned docs
C
Delaney Cairney
Copywriting edits
Rooney Cassy
Enable RFS for font resizing
Christabel Charlwood
Compressed Sass output support (#29702)
Portie Christou
Set vertical-align on .form-check-input (#29521)
Mata Codlin
Keep themed appearance for print (#29714)
Julietta Coke
Use double quotes in `.stylelintrc` (#29709)
Tessie Curzon
Regenerate package-lock.json (#29695)
D
Ninon Don
Switch to the Coveralls Action (#29478)
Emmott Dowsett
Fix npm audit vulnerability (#29677)
E
Carroll Erat
config.yml: update popper.js to v1.16.0 (#29624)
Peria Errichiello
Update anchor.js to v4.2.1 (#29662)
Dyann Escala
Dist (#29638)
F
Geoffry Flaunders
Make check label cursor customizable (#29654)
G
Merrily Garforth
Fixed input-height-sm and input-height-lg calculations (#29653)
Johnnie Gilby
package.json: Add funding property (#29646)
Gratia Gooley
Remove shx. (#29636)
Leigha Gorce
dashboard/index.html: update tabler-icons to v4.24.1 (#29651)
H
Haze Hubbert
Regenerate package-lock.json.
Mallory Hulme
site/assets/js/search.js: ignore the LGTM alert (#29634)
I
Reynold Indgs
Tighten regex a bit. If we need to make this more robust in the future, we can revert this as needed.
K
Thatcher Keel
example.html: use double quotes
Perren Keemar
Example shortcode: use a regex and simplify logic.
Sandi Keys
Move docs JS one folder up. (#29632)
Paweł Kuna
progress: Fix IE overflow (#29629)
L
Marsha Labat
removing last occurences of _fixTitle in our docs (#29631)
Maryjo Lebarree
Update modal.md (#29621) Fix typo
Emmy Levet
Update stylelint-config-twbs-bootstrap to 0.9.0 (#29612)
Jeffie Lewzey
Remove calc function from docs
M
Odelinda McCosh
Add calc() to function blacklist
Riane Milward
Doc tweaks.
Lorry Mion
Revert complex calculation
Parke Moneypenny
Add add and subtract function
Elston Muffett
Update normalizeDataKey to match the spec (#29609)
Avivah Mugleston
Remove redundant "Navbar divider" from "Contents" (#29601)
O
Parker Oaten
Update .form-check to properly support gradients when enabled (#29338)
P
Johannes Paternoster
v5: Simplify navbars by requiring containers (#29339)
Egan Poetz
Remove unneeded ESLint suppression and regenerate lock file (#29593)
R
Ban Rzehor
remove superflous transition parameter (#29595)
S
Haskel Shelper
Added animation when modal backdrop is static (#29516)
Wilburt Siegertsz
Add configurable button text wrapping (#29554)
Kellie Skingley
Enable eslint no-console rule except for build directory (#29585)
Dunn Slane
Regenerate package-lock.json (#29571)
Cesya Spritt
Fix one dev npm vulnerability. (#29568)
U
Flossi Uttley
Update hugo-bin to v0.47.0 (Hugo 0.59.0) (#29562)
Top users
Paweł Kuna
2 days ago
Jeffie Lewzey
now
Mallory Hulme
now
Dunn Slane
6 days ago
Emmy Levet
now
Maryjo Lebarree
2 days ago
Egan Poetz
4 days ago
Kellie Skingley
6 days ago
Haskel Shelper
now