Lists

<div class="row">
    <div class="col">
        <h3>Lists: (Unordered)</h3>
        <!-- Unordered list -->
        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
        </ul>
    </div>
    <div class="col">
        <h3>Lists: (Ordered)</h3>
        <!-- Ordered list -->
        <ol>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <li>Facilisis in pretium nisl aliquet</li>
            <li>Nulla volutpat aliquam velit</li>
            </ul>
    </div>
</div>

<hr>

<div class="row">
    <div class="col">
        <h3>Lists: (Unstyled)</h3>
        <!-- Unstyled list -->
        <ul class="list-unstyled">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Consectetur adipiscing elit</li>
            <li>Integer molestie lorem at massa</li>
            <ul>
                <li>Phasellus iaculis neque</li>
                <li>Purus sodales ultricies</li>
                <li>Vestibulum laoreet porttitor sem</li>
            </ul>
            </li>
            <li>Faucibus porta lacus fringilla vel</li>
            <li>Aenean sit amet erat nunc</li>
        </ul>
    </div>
    <div class="col">
        <h3>Lists: (Inline)</h3>
        <!-- Description list basic example -->
        <dl>
            <dt>Description lists</dt>
            <dd>A description list is perfect for defining terms.</dd>
            <dt>Malesuada porta</dt>
            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt>Euismod</dt>
            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
        </dl>
    </div>
</div>

<hr>

<div class="row">
    <div class="col">
        <h3>Description list alignment</h3>
        <!-- Description list alignment -->
        <dl class="row">
            <dt class="col-sm-3">Description lists&nbsp;</dt>
            <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
            <dt class="col-sm-3">Euismod</dt>
            <dd class="col-sm-9">
                <p class="mb-2">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
                <p class="mb-0">Donec id elit non mi porta gravida at eget metus.</p>
            </dd>
            <dt class="col-sm-3">Malesuada porta</dt>
            <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
            <dt class="col-sm-3 text-truncate">Long truncated term is truncated</dt>
            <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                sit amet risus.</dd>
            <dt class="col-sm-3">Nesting</dt>
            <dd class="col-sm-9">
                <dl class="row">
                    <dt class="col-sm-4">Nested definition list</dt>
                    <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat nunc augue.</dd>
                </dl>
            </dd>
        </dl>
    </div>

</div>