VF Page
<apex:page controller="acccheck" docType="HTML-5.0" standardStylesheets="false" showHeader="false" sidebar="false">
<html lang="en">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" media="print" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type= "text/css">
</style>
</head>
<body>
<apex:form >
<apex:pageBlock >
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<apex:repeat value="{!acc}" var="c">
<tbody>
<tr>
<td>
<apex:commandLink action="{!details}" styleClass="btn btn-link" value="{!c.name}" html-data-toggle="modal" html-data-target="#display" >
<apex:param value="{!c.id}" name="offname"/>
</apex:commandlink>
</td>
</tr>
</tbody>
</apex:repeat>
</table>
</div>
</div>
<div class="modal fade" id="display" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="model-header"> hello</div>
<div class="model-body">
<apex:repeat value="{!acc1}" var="a">
<apex:outputField value="{!a.name}"/>
</apex:repeat>
</div>
<div class="model-footer">
This is Footer
</div>
</div>
</div>
</div>
</div>
</apex:pageblock>
</apex:form>
</body>
</html>
</apex:page>
Class
public class acccheck {
public list<account> acc{get;set;}
public list<account> acc1{get;set;}
public acccheck(){
acc=[select id,name from account];
}
public void details(){
string done=apexpages.currentpage().getparameters().get('offname');
acc1=[select id,name from account where id=:done ];
}
}