bootstrap dropdown-menu no css format

Question

I'm trying to implement a bootstrap dropdown menu, despite the right class being applied to the sublist, I'm losing my formatting and the padding that normally applies to bootstrap.

I'm using bootstrap 4.0.0-alpha.2 as follows:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs navbar-collapse" id="exCollapsingNavbar2">
        <a class="navbar-brand" href="{% url 'home' %}"><img width="140" src="{% static 'images/openopps_logo.png' %}"</a>
        <ul class="nav navbar-nav">
            <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'pricing' %}">Pricing</a></li>
            <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'home' %}">Blog</a></li>
            <li class="nav-item oo-roboto-override dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="{% url 'about' %}">
                    About
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="{% url 'about' %}#vision">Vision</a></li>
                    <li><a href="{% url 'about' %}#our_company">Our company</a></li>
                    <li><a href="{% url 'about' %}#faqs">FAQs</a></li>
                    <li><a href="{% url 'about' %}#contact_us">Contact us</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-xs-right">
            {% if user.is_authenticated %}
                <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_logout' %}"><button class="btn btn-sm btn-oo-outline">Logout</button></a></li>
            {% else %}
                <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'registration_register' %}"><button class="btn btn-sm btn-oo">Sign Up</button></a></li>
                <li class="nav-item oo-roboto-override"><a class="nav-link" href="{% url 'auth_login' %}"><button class="btn btn-sm btn-oo-outline">Login</button></a></li>
            {% endif %}
        </ul>
    </div>
</nav>

Answer 1

Bootstrap 4 has an extra class required for dropdown menus. Using the following class in the <li> tags works.

<li class="dropdown-item"><a href="{% url 'about' %}#vision">Vision</a></li>