<br><br>

<div class="col-3">

          <div class="dropdown">

        <a class="btn btn-primary rounded-0 btn-sm" href="#" data-bs-toggle="dropdown">

           <i class="bi bi-plus-square"></i> Add New line

          </a>

          <ul class="dropdown-menu">

            <li><a class="dropdown-item" href="#" id="add_ingredient">Ingredient</a></li>

            <li><a class="dropdown-item" href="#" id="add_recipe">Recipe</a></li>

            <li><a class="dropdown-item" href="#" id="add_processing_step">Processing_step</a></li>

            <li><a class="dropdown-item" href="#" id="add_process_ingredient">Process Ingredient</a></li>

            <li><a class="dropdown-item" href="#" id="add_process_recipe">Process Recipe</a></li>

            <li><a class="dropdown-item" href="#" id="add_text_line">Text Line</a></li>

            <li><a class="dropdown-item" href="#" id="add_horizontal_line">Horizontal Line</a></li>

          </ul>

      </div>

          </div>

<br><br>

<!-- Example split primary button -->

<div class="btn-group">

  <button type="button" class="btn btn-primary">Action</button>

  <button

    type="button"

    class="btn btn-primary dropdown-toggle dropdown-toggle-split"

    data-mdb-dropdown-init

    data-mdb-ripple-init

    aria-expanded="false"

  >

    <span class="visually-hidden">Toggle Dropdown</span>

  </button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">Action</a></li>

    <li><a class="dropdown-item" href="#">Another action</a></li>

    <li><a class="dropdown-item" href="#">Something else here</a></li>

    <li><hr class="dropdown-divider" /></li>

    <li><a class="dropdown-item" href="#">Separated link</a></li>

  </ul>

</div>