<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/> <div class="row" style="margin-top:2rem;"> <div class="col-lg-12 text-center"> <div class="btn-group"> <button type="button" class="btn-mdf btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Share <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#" style="border-bottom: 1px solid #ccc;">Twitter <i class="fab fa-twitter btn-mdf-s" style="padding-left: 10px;"></i></a></li> <li><a href="#" style="border-bottom: 1px solid #ccc;">Whatsapp <i class="fab fa-whatsapp btn-mdf-s" style="padding-left: 12px;"></i></a></li> <li><a href="#" style="border-bottom: 1px solid #ccc;">Mail <i class="fas fa-envelope btn-mdf-s" style="padding-left: 10px;"></i></a></li> <li><a href="#" style="border-bottom: 1px solid #ccc;">Copy <i class="fas fa-copy btn-mdf-s" style="padding-left: 12px;"></i></a></li> </ul> </div> </div> </div>

.btn-mdf-s{ float: right; border-left: 1px solid #ccc; padding-top: 3px; padding-bottom: 3px; }