Skip to content

Instantly share code, notes, and snippets.

@imamuddinwp

imamuddinwp/Bootstrap-4-Table.html

Last active August 1, 2019 06:34
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 imamuddinwp/f6a7a8bbe6716b0334bcb04fc0efffac to your computer and use it in GitHub Desktop.
Save imamuddinwp/f6a7a8bbe6716b0334bcb04fc0efffac to your computer and use it in GitHub Desktop.
Download ZIP
Hey there; it's me! Imam Uddin; imamcu07. Here is the HTML5 Bootstrap 4 Table example. For more details: https://about.me/imamcu07
Raw
Bootstrap-4-Table.html
<!-- Bootstrap 4 Practise : powered by ImAmUdDiN : https://about.me/imamcu07 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example Template</title>
<meta charset="utf-8">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- YOUR CONTENT STARTS HERE -->
<div class="container">
<h2> <code> Basic বুটস্ট্রাপ টেবিলের উদাহরণ</code></h2>
<table class="table">
<thead>
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr>
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr>
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr>
<td>মোঃ রাজু</td>
<td>২৩ </td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>Striped </code> বুটস্ট্রাপ টেবিলের উদাহরণ</h2>
<table class="table table-striped">
<thead>
<tr>
<th>নাম </th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr>
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr>
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr>
<td>মোঃ রাজু</td>
<td>২৩</td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>বর্ডারযুক্ত বুটস্ট্রাপ টেবিলের উদাহরণ</code> </h2>
<table class="table table-bordered">
<thead>
<tr>
<th>নাম </th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr>
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr>
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr>
<td>মোঃ রাজু</td>
<td>২৩</td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>হোভারযুক্ত বুটস্ট্রাপ টেবিলের উদাহরণ</code></h2>
<table class="table table-hover">
<thead>
<tr>
<th>নাম </th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr>
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr>
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr>
<td>মোঃ রাজু</td>
<td>২৩</td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>কনডেন্সড বুটস্ট্রাপ টেবিলের উদাহরণ</code></h2>
<table class="table table-condensed">
<thead>
<tr>
<th>নাম </th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr>
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr>
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr>
<td>মোঃ রাজু</td>
<td>২৩</td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>কনটেকচুয়াল ক্লাসের ব্যবহার সহ বুটস্ট্রাপ টেবিল</code></h2>
<table class="table">
<thead>
<tr>
<th>নাম </th>
<th>বয়স</th>
<th>ই-মেইল</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>ফয়সাল খান</td>
<td>২৩</td>
<td>faysal@email.com</td>
</tr>
<tr class="success">
<td>জিহাদুল ইসলাম</td>
<td>২২</td>
<td>zehad@email.com</td>
</tr>
<tr class="warning">
<td>মোঃ রাজু</td>
<td>২৩</td>
<td>raju@email.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>রেসপন্সিভ বুটস্ট্রাপ টেবিলের উদাহরণ </code></h2>
<p>রেসপন্সিভনেস দেখার জন্য ব্রাউজারের উইন্ডো ছোট করুন</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>বয়স</th>
<th>মোবাইল</th>
<th>শহর</th>
<th>দেশ</th>
</tr>
</thead>
<tbody>
<tr>
<td>১</td>
<td>রাজু</td>
<td>২৩</td>
<td>০১৮******৩৪</td>
<td>চাঁদপুর</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>২</td>
<td>জিহাদ</td>
<td>২২</td>
<td>০১৬******৭৮</td>
<td>চাঁদপুর</td>
<td>বাংলাদেশ</td>
</tr>
<tr>
<td>২</td>
<td>ফয়সাল</td>
<td>২৩</td>
<td>০১৬******৫৬</td>
<td>চাঁদপুর</td>
<td>বাংলাদেশ</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<table class="table">
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table table-dark">
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table">
<thead class="thead-dark">
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<table class="table">
<thead class="thead-light">
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>Dark striped Table</code></h2>
<table class="table table-striped table-dark">
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<h2><code>Dark Table with border</code></h2>
<table class="table table-bordered table-dark">
<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 class="container">
<h2><code>Hover Table</code></h2>
<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>
<table class="table table-hover table-dark">
<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 class="container">
<h2><code>Caption Table</code></h2>
<table class="table">
<caption>List of users</caption>
<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>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- YOUR CONTENT ENDS HERE -->
<!-- JavaScript: placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
@imamuddinwp
Copy link
Author

imamuddinwp commented Aug 1, 2019 •
edited

See preview here: Codepen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment