<!DOCTYPE html>
<html>
<head>
<title>Basic Panel</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">Hi this is basic panel !</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Panel with Heading</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel sample content</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Panel with Footer</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">Panel sample content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Contextual Alternatives</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">Panel with primary headre</div>
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text.</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with success headre</div>
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text.</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with info headre</div>
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text.</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with warning headre</div>
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text.</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with danger headre</div>
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text.</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Panel with Tables</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Website URL's</div>
<div class="panel-body">
<p>The following table contains some website url's.</p>
</div>
<!-- Table -->
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Free Time Learn</td>
<td>www.freetimelearn.com</td>
</tr>
<tr>
<td>2</td>
<td>Free Time Learning</td>
<td>www.freetimelearning.com</td>
</tr>
<tr>
<td>3</td>
<td>FreeTimeLearn</td>
<td>www.freetimelearn.xyz</td>
</tr>
<tr>
<td>4</td>
<td>FreeTimeLearning</td>
<td>www.freetimelearning.xyz</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The following table contains some website url's.
S.No | Name | URL |
---|---|---|
1 | Free Time Learn | www.freetimelearn.com |
2 | Free Time Learning | www.freetimelearning.com |
3 | FreeTimeLearn | www.freetimelearn.xyz |
4 | FreeTimeLearning | www.freetimelearning.xyz |
<!DOCTYPE html>
<html>
<head>
<title>Panel with list groups</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="panel panel-info">
<div class="panel-heading">Websites</div>
<div class="panel-body">
Educational websites
</div>
<!-- List group -->
<div class="list-group">
<a href="http://www.freetimelearn.com" target="_blank" class="list-group-item">www.freetimelearn.com</a>
<a href="http://www.freetimelearning.com" target="_blank" class="list-group-item">www.freetimelearning.com</a>
<a href="http://www.freetimelearn.xyz" target="_blank" class="list-group-item">www.freetimelearn.xyz</a>
<a href="http://www.freetimelearning.xyz" target="_blank" class="list-group-item">www.freetimelearning.xyz</a>
</div>
</div>
</div>
</body>
</html>