to create drop up menu with split button in bootstrap4

Question

I want to create drop up menu with split button class I am getting dropdown menu instead of drop up. Iam writing the following code snippet.

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <br/>
  <div class="dropup">
  <div class="btn-group">
    <button type="button" class="btn btn-primary " >Dropup button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>
</div>

Answer 1

You just need to add one class dropup in your "btn-group" div. See below updated html.

<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br/>
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary " >Dropup button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>