How to display lists? (Last updated on: 06 jan 2021)
To present your content as a list of items - for example, a collection of links - you can simply paste your content into the editor window, one item per line, select the lines and click one of the list buttons in the editor's toolbar, for unordered (bullets) or ordered (numbers) lists. Note that if you create an unordered list, the editor will not display list bullets but they will be displayed on your page once it is published:
If you are unsure whether your list is properly formatted, you can click on the "Source" button which will reveal the HTML source code of your list:
If you want to place all list items on a single line, switch over to HTML source code and add a class of "list-inline" to your unordered list as per the following example:
<ul class="list-inline">. See the screenshot below to see how a single line list is displayed.
If you have a description list, that is a list of terms and their descriptions, you can display it horizontally as well:
To structure your description list as per the example below, add a class of "dl-horizontal" to the <dl> HTML tag:
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
You can also spruce up the look and feel of your lists by using a list group component.
<li class="list-group-item"><a href="#">List item 1</a></li>
<li class="list-group-item"><a href="#">List item 2</a></li>
<li class="list-group-item"><a href="#">List item 3</a></li>
And if you want a more 'button' feel for your list, you can linkify your list group items as per the following example:
<a class="list-group-item active" href="#">List item 1</a>
<a class="list-group-item" href="#">List item 2</a>
<a class="list-group-item" href="#">List item 3</a>