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
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
Linked list with right image
Bordered linked list with left image
Bordered linked list with right image
Linked list headers
Bordered linked list headers
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
Linked heading title
Set heroically amid
Away one gosh gracefully tenably hid amid far overlay ouch oh until oyster crud much in far farKneeled 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