Bootstrap Button Drop Down pops up above div

Question

I'd like the list to drop down below the button but my dropdown to fall under the button not all the way on the first div where it's appearing right now.

HTML

    <div class="categories row" id = "secondDiv">
      <div class = "col-md-4 header text-center"> 
        <p id = "columnOne"> Find Your Favorite Celebrity </p>
         <div class="dropdown-container">
            <button class="btn btn-secondary dropdown-toggle btn-outline-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> JUST
            <span class="caret"></span></button>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Justin Bieber <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Taylor Swift <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Jay Z <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Beyonce <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Rihanna <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Ariana Grande <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                    <a class="dropdown-item" href="#">Cherie Lum <input type="radio" id="ID" name="NAME" value="VALUE"><label for="ID"></label> </a>
                  </div>
          </div> 
      </div>

CSS

.dropdown-container {
position: relative; }

.dropdown-menu { position: absolute; top: 100%; /* Bottom of button / margin-left: -100px; / More to the left */ }

Naren Murali Naren Murali · Accepted Answer · 2017-10-14T18:49:38

Is this what you are looking for.

The CSS used is

.dropdown-container {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0px;
}

.dropdown-menu a {
  display: block;
}

.dropdown-container {
  position: relative;
  display: inline-block;
}

JSFiddle Demo

Bootstrap Button Drop Down pops up above div

1 Answers