<!-- Start your project here-->

  <!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">

  Launch demo modal

</button>

​

<!-- Modal -->

<div class="modal fade bottom" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

  aria-hidden="true">

  <div class="modal-dialog modal-full-height modal-bottom   " role="document">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

          <span aria-hidden="true">&times;</span>

        </button>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>

  <!-- Start your project here-->

<!-- Basic dropdown -->

<button class="btn btn-primary dropdown-toggle mr-4" type="button" data-toggle="dropdown"

  aria-haspopup="true" aria-expanded="false">Basic dropdown</button>

​

<div class="dropdown-menu">

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

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

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

  <div class="dropdown-divider"></div>

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

</div>

<!-- Basic dropdown -->

<!-- Split button -->

<div class="btn-group">

  <button type="button" class="btn btn-danger">Danger</button>

  <button type="button" class="btn btn-danger dropdown-toggle px-3" data-toggle="dropdown" aria-haspopup="true"

    aria-expanded="false">

    <span class="sr-only">Toggle Dropdown</span>

  </button>

  <div class="dropdown-menu">

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

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

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

    <div class="dropdown-divider"></div>

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

  </div>

</div>