List layouts
In previous versions of Bootstrap we had a useful component called Media Objects. From v5 onwards it has been removed in favour of containers with flex utility classes. This page contains examples of media objects designed with list group component. Media lists also can be based on our flex utility classes, whatever you prefer. All examples have been taken from previous version of Limitless to keep them all in a new version.
Bordered list with left images
Bordered list with right images
Headers in regular list
![](../../../assets/images/demo/users/face1.jpg)
![](../../../assets/images/demo/users/face11.jpg)
Headers in bordered list
Linked media lists
Linked media list is also based on list group component as it has all styling for link states. Use list-group-borderless
for a simple list without vertical and horizontal borders and .list-group-flush
for a list with horizontal borders. Add vertical padding to the list with our padding utility classes if necessary.
Linked list with left image
![](../../../assets/images/demo/users/face1.jpg)
![](../../../assets/images/demo/users/face2.jpg)
![](../../../assets/images/demo/users/face3.jpg)
Linked list with right image
![](../../../assets/images/demo/users/face4.jpg)
![](../../../assets/images/demo/users/face5.jpg)
![](../../../assets/images/demo/users/face6.jpg)
Bordered linked list with left image
![](../../../assets/images/demo/users/face4.jpg)
![](../../../assets/images/demo/users/face5.jpg)
![](../../../assets/images/demo/users/face6.jpg)
Bordered linked list with right image
![](../../../assets/images/demo/users/face3.jpg)
![](../../../assets/images/demo/users/face2.jpg)
![](../../../assets/images/demo/users/face1.jpg)
Linked list headers
![](../../../assets/images/demo/users/face3.jpg)
![](../../../assets/images/demo/users/face4.jpg)
![](../../../assets/images/demo/users/face5.jpg)
Bordered linked list headers
![](../../../assets/images/demo/users/face7.jpg)
![](../../../assets/images/demo/users/face8.jpg)
![](../../../assets/images/demo/users/face9.jpg)
Title and text options
Typically media list consists of title, body text and image, and everything can be customized with our utility classes according to your needs. The following examples demonstrate title text options (such as colors, links and font sizes), annotations and helper text. You can use any time of text content in as many lines as you want. And this can be customized in all media list layouts.
Linked title
![](../../../assets/images/demo/users/face11.jpg)
![](../../../assets/images/demo/users/face12.jpg)
Linked heading title
![](../../../assets/images/demo/users/face13.jpg)
Set heroically amid
Away one gosh gracefully tenably hid amid far overlay ouch oh until oyster crud much in far far![](../../../assets/images/demo/users/face14.jpg)
Kneeled indirect
Strangely mounted the and as however repaid wow goodness oh falcon unproductive and some bredSupported elements
Media list supports various components and elements: form controls, input fields, badges, icons, indicators, buttons, text links and many others. You can use all elements in both linked and non-linked lists. Image size can be controlled either in <img>
tag with width
and height
attributes or via CSS. You can also use our utility classes to adjust vertical/horizontal alignment of all elements and/or change the overall look and feel.
Icon, icon list or dropdown menu
Badges
Bordered icon
Status badges
Pill badges
Object badges