Bootstrap Progress Bars

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Basic Progress Bar</h2>
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”70″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
<span class=”sr-only”>70% Complete</span>
</div>
</div>

<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”70″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70%
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” aria-valuenow=”40″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40% Complete (success)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-info” role=”progressbar” aria-valuenow=”50″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:50%”>
50% Complete (info)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-warning” role=”progressbar” aria-valuenow=”60″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:60%”>
60% Complete (warning)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-danger” role=”progressbar” aria-valuenow=”70″
aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70% Complete (danger)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success progress-bar-striped” role=”progressbar”
aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40% Complete (success)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-info progress-bar-striped” role=”progressbar”
aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:50%”>
50% Complete (info)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-warning progress-bar-striped” role=”progressbar”
aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:60%”>
60% Complete (warning)
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-danger progress-bar-striped” role=”progressbar”
aria-valuenow=”70″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:70%”>
70% Complete (danger)
</div>
</div>
<div class=”progress”>
<div class=”progress-bar progress-bar-striped active” role=”progressbar”
aria-valuenow=”40″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width:40%”>
40%
</div>
</div>

<div class=”progress”>
<div class=”progress-bar progress-bar-success” role=”progressbar” style=”width:40%”>
Free Space
</div>
<div class=”progress-bar progress-bar-warning” role=”progressbar” style=”width:10%”>
Warning
</div>
<div class=”progress-bar progress-bar-danger” role=”progressbar” style=”width:20%”>
Danger
</div>
</div>

</div>

</body>
</html>

Progressbar

Bootstrap – Tables

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”&gt;
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js”></script&gt;
</head>
<body>

<div class=”container”>
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

<div class=”container”>
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class=”table table-striped”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class=”table table-bordered”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state on table rows:</p>
<table class=”table table-hover”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class=”container”>
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class=”success”>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td class=”danger”>mary@example.com</td>
</tr>
<tr class=”info”>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Table_1

table_2