Humanitarianresponse Logo

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:

Editor window with an unordered list displayed

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:

Editor window with the source code of an unordered list displayed

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:

Screenshot of an example of a description list element

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.

Screenshot of a list group component

<ul class="list-group">
    <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>
</ul>

And if you want a more 'button' feel for your list, you can linkify your list group items as per the following example:

Screenshot of a linkified list group component

<div class="list-group">
    <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>
</div>