<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" title="Share this content" data-toggle="modal" data-target="#myModal"> <i class="fa fa-share-alt"></i> Share </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"><i class="fa fa-share-alt"></i> Share</h4> </div> <div class="modal-body"> <p><a title="Linkedin " href="http://www.linkedin.com/shareArticle?mini=true&url=http://nusasurfwear.com/nusa2&title=nusasurf&summary=share the content"<span class="fa-stack fa-lg"target="_blank"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x"></i></span></a> <a title="WordPress" href="https://wordpress.com/"><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"></i><i class="fa fa-wordpress fa-stack-1x"></i></span></a><a title="E-mail" href=""><span class="fa-stack fa-lg"><i class="fa fa-square-o fa-stack-2x"target="_blank"></i><i class="fa fa-envelope fa-stack-1x"></i></span></aan></a></p> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div>