Skip to content

Instantly share code, notes, and snippets.

@anonewb

anonewb/index.html

Last active March 31, 2019 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonewb/7f8042e0831ff3d90156a8df06ec2020 to your computer and use it in GitHub Desktop.
Save anonewb/7f8042e0831ff3d90156a8df06ec2020 to your computer and use it in GitHub Desktop.
Download ZIP
index.html--> tfoot & index1.html--> col-md-6
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>task-1</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.form-group {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Using bootsrap 4 panel, table, collapse, checkbox btn</div>
<!-- Table -->
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Bool</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
<th scope="col">city</th>
<th scope="col">Handle</th>
<th scope="col">fb Handle</th>
<th scope="col">tw Handle</th>
<th scope="col">In Handle</th>
<th scope="col">Insta Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Mark</td>
<td>Otto</td>
<td>34</td>
<td>la</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Larry the Bird</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bool</td>
<td>Mark</td>
<td>Otto</td>
<td>34</td>
<td>la</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Bool</td>
<td>Jacob</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Bool</td>
<td>Larry the Bird</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="10">
<div id="collapseOne" aria-expanded="false" class="collapse">
<div class="well">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="10">
<div id="collapseTwo" aria-expanded="false" class="collapse">
<div class="well">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="10">
<div id="collapseThree" aria-expanded="false" class="collapse">
<div class="well">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
Raw
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>task-1</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<style>
.form-group {
margin-bottom: 0;
}
.row {
padding-left: 50px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Bool</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
<th scope="col">city</th>
<th scope="col">Handle</th>
<th scope="col">fb Handle</th>
<th scope="col">tw Handle</th>
<th scope="col">In Handle</th>
<th scope="col">Insta Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Mark</td>
<td>Otto</td>
<td>34</td>
<td>la</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Jacob</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div class="form-group">
<div class="checkbox">
<label
data-toggle="collapse"
data-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
<input type="checkbox" />
</label>
</div>
</div>
</td>
<td>Larry the Bird</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Bool</td>
<td>Mark</td>
<td>Otto</td>
<td>34</td>
<td>la</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Bool</td>
<td>Jacob</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
<td>@jac</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Bool</td>
<td>Larry the Bird</td>
<td>Thornton</td>
<td>34</td>
<td>la</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
<td>@lary</td>
</tr>
</tbody>
</table>
<div id="collapseOne" aria-expanded="false" class="collapse">
<div class="well">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Mark</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-md-6">
<div id="collapseTwo" aria-expanded="false" class="collapse">
<div class="well">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jacob</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Jacob</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> -->
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment