Search code examples
cssbootstrap-4dropdown

What is causing extra whitespace in Bootstrap dropdown?

What is causing my dropdown to have extra whitespace? (Apologies for the screenshot)

enter image description here

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <span class="caret">Snooze</span>
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item">1 Hour</li>
    </div>
</div>

As far as I know there is nothing strange in my CSS files that would cause this. I am using Bootstrap4.

Solution

  • Check out this code. I removed <span class="caret"></span> because it's not a valid class in bootstrap. I changed btn-default to other button, btn-primary in this case.

    The most important error - look at dropdown-menu. You open button tag and close li so I changed that to div and it works nicely.

    Check out Bootstrap Docs for more info here https://getbootstrap.com/docs/4.3/components/dropdowns/.

    /*DEMO*/
body{padding:3rem}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>


<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Snooze</button>
    <div class="dropdown-menu">
        <div class="dropdown-item">1 Hour</div>
    </div>
</div>