<li class="pi-draggable active" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-primary" href="#">Button</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-secondary" href="#">Secondary</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-info" href="#">Info</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-light" href="#">Light</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-dark" href="#">Dark</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-primary" href="#">Outline</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-secondary" href="#">Secondary</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-info" href="#">Info</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-light" href="#">Light</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-dark" href="#">Dark</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#">Link</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-primary" href="#"><i class="fa fa-star fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-primary" href="#"><i class="fa fa-download fa-fw"></i>&nbsp;Left icon </a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-outline-primary" href="#">Right icon <i class="fa fa-shopping-cart fa-fw"></i> </a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group dropup">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropup </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div> 
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group dropright">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropright </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group dropleft">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropleft </button>
        <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">Split Dropdown</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"></button>
        <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(128px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
            <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>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> With Form </button>
        <div class="dropdown-menu">
            <form class="p-3">
                <div class="form-group">
                    <label for="exampleDropdownFormEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                </div>
                <div class="form-group">
                    <label for="exampleDropdownFormPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                </div>
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="dropdownCheck">
                    <label class="form-check-label" for="dropdownCheck"> Remember me </label>
                </div>
                <button type="submit" class="btn btn-primary">Sign in</button>
            </form>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">New around here? Sign up</a>
            <a class="dropdown-item" href="#">Forgot password?</a>
        </div>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <button class="btn btn-primary" type="button">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pi-draggable btn-group"> <a href="#" class="btn btn-primary">Btn 1</a> <a href="#" class="btn btn-primary">Btn 2</a> <a href="#" class="btn btn-primary">Btn 3</a> </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="pi-draggable btn-group"> <a href="#" class="btn btn-outline-primary">Btn A</a> <a href="#" class="btn btn-primary">Btn B</a> </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="radio" name="options" id="option1" autocomplete="off" checked=""> Radio On </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" autocomplete="off"> Radio Off </label>
    </div>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#55acee" target="_blank"><i class="fa fa-twitter fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#55acee" target="_blank"><i class="fa fa-twitter fa-fw fa-1x py-1"></i> Tweet</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" style="color:#55acee" target="_blank" href="#"><i class="fa fa-twitter fa-fw fa-1x py-1"></i> Twitter</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#3b5998" target="_blank"><i class="fa fa-facebook fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#3b5998" target="_blank"><i class="fa fa-facebook-square fa-fw fa-1x py-1"></i> Share</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#3b5998" target="_blank"><i class="fa fa-facebook-official fa-fw fa-1x py-1"></i> Facebook</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#dd4b39" target="_blank"><i class="fa fa-google-plus fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#dd4b39" target="_blank"><i class="fa fa-google-plus-circle fa-fw fa-1x py-1"></i> Share</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#dd4b39" target="_blank"><i class="fa fa-google-plus-official fa-fw fa-1x py-1"></i> Google</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#0976b4" target="_blank"><i class="fa fa-linkedin fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#0976b4" target="_blank"><i class="fa fa-linkedin-square fa-fw fa-1x py-1"></i>&nbsp;Link</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#0976b4" target="_blank"><i class="fa fa-linkedin-square fa-fw fa-1x py-1"></i> Linkedin</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#cc2127" target="_blank"><i class="fa fa-pinterest-p fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#cc2127" target="_blank"><i class="fa fa-pinterest-square fa-fw fa-1x py-1"></i> Pin it</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#cc2127" target="_blank"><i class="fa fa-pinterest fa-fw fa-1x py-1"></i> Pinterest</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#e52d27" target="_blank"><i class="fa fa-youtube-play fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#e52d27" target="_blank"><i class="fa fa-youtube fa-fw fa-1x py-1"></i> View</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#e52d27" target="_blank"><i class="fa fa-youtube-square fa-fw fa-1x py-1"></i> Youtube</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#ff4500" target="_blank"><i class="fa fa-reddit-alien fa-fw fa-1x py-1"></i></a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn text-white" href="#" style="background:#ff4500" target="_blank"><i class="fa fa-reddit fa-fw fa-1x py-1"></i> Post</a>
</li>
<li class="pi-draggable" draggable="true" ondragstart="return dragStart(event)">
    <a class="btn btn-link" href="#" style="color:#ff4500" target="_blank"><i class="fa fa-reddit fa-fw fa-1x py-1"></i> Reddit</a>
</li>
