<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="span3 well"> <center> <a href="#aboutModal" data-toggle="modal" data-target="#myModal"> <img src="http://m.c.lnkd.licdn.com/mpr/pub/image-0em6ZpPcOdZ5lNMcu6cP5vOTrPn4Gvnzr-mkepfGr4nX-Rp70emkiNscr_K_GnWmBylB/prasad-phule.jpg" name="aboutme" width="140" height="140" class="img-circle"> </a> <h3>Prasad Phule</h3> <em>click on me to see Image Manager</em> </center> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">✕</button> <h4 class="modal-title" id="myModalLabel">Image Manager by Prasad</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-12"> <div class="col-md-4"> <div class="btn-group "> <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#"> <span class="glyphicon glyphicon-plus-sign"></span>Menu <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> <li class="divider"></li> <li><a href="#">Choice..</a></li> </ul> </div> <button class="btn btn-default"> <span class="glyphicon glyphicon-upload"></span>Upload</button> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </div> <div class="col-md-4"> <div class="pull-right"> <button class="btn btn-default"> <span class="glyphicon glyphicon-refresh"></span> </button> <div class="btn-group"> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-th"></span> </button> </div> <div class="btn-group "> <a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#"> Sort <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> <li class="divider"></li> <li><a href="#">Choice..</a></li> </ul> </div> </div> </div> </div> <div class="col-md-12"></div> <div class="col-md-12"> <div class="col-md-3 well"> </div> <div class="col-md-9"> <table class="table table-hover" style="height:300px"> <thead> <tr> <th>ID</th> <th>Title</th> <th>Parent ID</th> <th class="text-center">Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>News</td> <td>News Cate</td> <td class="text-center"><a href="#" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span></a></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span> save</button> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> cancel</button> </div> </div> </div> </div> </div>