Default unordered list

Use .list class in regular ul element to add some spacing between list items. Multiple levels are supported

Unstyled list

Remove the default list-style and left margin on list items. This only applies to immediate children list items

Square list type

Change default bullet list item shape to square shape by adding .list-square class to the list container

Default ordered list

Display numbered list with multiple nested levels with <ol> (ordered list) element and .list class

Circle list type

Change default bullet list item shape to circle shape by adding .list-circle class to the list container

List with icons

(Un)ordered list items support icons, badges and other inline elements, in both directions and all levels

Default list size

Use regular ul or ol elements to create a list of content. Kepp in mind that there's no distance between items

Custom list spacing

If you want to have 5px margin between list items, use .list class in ordered or unordered list container

Extended list

You can also control the gap between list items with our margin utility classes. We are using .mt-2 class in this example

Default inline list

Use .list-inline class in ul/ol elements and .list-inline-item in items to create inline content list

Condensed inline list

You can use our margin utility classes in list items to control the distance between them

Separated inline list

Use .list-inline-bullet in inline list container to add rounded bullet between list items

Vertical description list

Create vertical list of terms with their associated descriptions with dl element in parent container and dt element to add title, and dd element to add description

Horizontal description list

Align terms and descriptions horizontally by using our grid system’s predefined classes. For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis

Left border

Add optional left border to any blockquote with a combination of .border-start and .border-width-[number] classes added to the main .blockquote container. Adjust padding if needed

Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

Left aligned image

Blockquote can be used with left image, usually user avatar. Add .d-[breakpoint]-flex class to the main blockquote container and add image markup inside

Dear far dove lynx inaudibly between after under after on some far warthog.

Left aligned icon

You can also use blockquote with an icon, just like the example with user avatar. You can control icon size with .ph-[2x|3x] classes for perfect alignment

Paid a cobra along or the sloth dear much eagle gosh from disagreeably lethargic before.

Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

Right border

Add optional right border to any blockquote with a combination of .border-end and .border-width-[number] classes added to the main .blockquote container. Adjust padding if needed

Or a more far thought close mammoth that so one bee more fidgeted checked and written.

Right aligned image

Blockquote can be also used with right image. Add .d-[breakpoint]-flex class to the main blockquote container and add image markup inside

Well hey as seagull more and staunchly uniquely much less alas delicate much checked.

Right aligned icon

Icon in blockquotes can be also aligned to the right. Markup is a bit different, but logic is exactly the same as in previous example. Just make sure spacing between elements is correct

Or a more far thought close mammoth that so one bee more fidgeted checked and written.

Well hey as seagull more and staunchly uniquely much less alas delicate much checked.