Twitter Bootstrap Demo Step 4
Completed Demo with table data
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container" style="margin-top: 10px;">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal well">Find By ID:
<input placeholder="<enter id here>" type="text">
<button class="btn btn-default">Search</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Link 1</a>
</li>
<li class="active"><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
</ul>
</div>
<div class="col-md-8">
<table class="table table-striped table-bordered ">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<td>4</td>
<td>Larry</td>
...