Listen & Menüs

<nav style="max-width: 20rem;">
    <ul class="nav nav-pills flex-column">
        <li class="nav-item">
            <a class="nav-link" href="#">Pinnwand</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Seiten</a>
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Seite 1</a>
                    <ul class="nav nav-pills flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Unterseite 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Unterseite 2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active current" href="#">Unterseite 3</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Unterseite 4</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Seite 2</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

<nav style="max-width: 20rem;">
    <dl class="dl-icons">
        <a class="d-flex " href="#">
            <dt><i class="icon-dashboard icon-sm"></i></dt>
            <dd>Pinnwand</dd>
        </a>
        <a class="d-flex" href="#">
            <dt><i class="icon-insert-drive-file icon-sm"></i></dt>
            <dd>Seite #1</dd>
        </a>
        <a class="d-flex " href="#">
            <dt><i class="icon-insert-drive-file icon-sm"></i></dt>
            <dd>Seite #2</dd>
        </a>
        <a class="d-flex pl-4" href="#">
            <dt><i class="icon-insert-drive-file icon-sm"></i></dt>
            <dd>Unterseite #1</dd>
        </a>
        <a class="d-flex pl-4" href="#">
            <dt><i class="icon-insert-drive-file icon-sm"></i></dt>
            <dd>Unterseite #2</dd>
        </a>
        <a class="d-flex " href="#">
            <dt><i class="icon-insert-drive-file icon-sm"></i></dt>
            <dd>Seite #3</dd>
        </a>
        <a class="d-flex" href="#">
            <dt><i class="icon icon-add-box icon-sm"></i></dt>
            <dd>Seite erstellen</dd>
        </a>
        <a class="d-flex" href="#">
            <dt><i class="icon icon-comment icon-sm"></i></dt>
            <dd>Nachricht erstellen</dd>
        </a>
    </dl>
</nav>

<ul class="bullets row list-unstyled my-0">
    <li class="lead d-flex col-12 col-md-6 col-lg-4 mt-2 mt-xl-4 mb-0">
        <i class="icon icon-check mr-1"></i><span>Vestibulum ante ipsum primis in faucibus orci luctus </span>
    </li>
    <li class="lead d-flex col-12 col-md-6 col-lg-4 mt-2 mt-xl-4 mb-0">
        <i class="icon icon-check mr-1"></i><span>In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. </span>
    </li>
    <li class="lead d-flex col-12 col-md-6 col-lg-4 mt-2 mt-xl-4 mb-0">
        <i class="icon icon-check mr-1"></i><span>Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. </span>
    </li>
</ul>