1.

Tables - Bootstrap

Answer»

Using tables in bootstrap, you can aggregate a huge amount of data and present it in a clear, logical manner.

You just need to add the base class .table, then extend with custom styles or modifier classes.

Example:

Basic Table bootstrap 4

The .table class is used to add basic styling (light padding and only horizontal dividers) to a table:

FirstnameLastnameEmail
Lavishmaliklavishmalik28@gmail.com
Johndellingerjogndellinger01@gmail.com
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table bootstrap 4</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>Lavish </td>
<td>malik</td>
<td>lavishmalik28@gmail.com</td>
</tr>
<tr>
<td>John</td>
<td>dellinger</td>
<td>jogndellinger01@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
tableThe table is used for adding a basic table. <table class="table">...table bootstrap</table>
thead-lightProvides a light header background for the table header. <thead class="thead-light">
thead-darkProvides a dark header background for the table header. <thead class="thead-dark">
table-striped Used for alternate dark and light table backgrounds. <table class="table table-striped">
table-borderedruled table. <table class="table table-bordered">
table-borderlessRemove borders. <table class="table table-borderless">
table-hover The .table-hover class is used to add a hover effect on table rows. <table class="table table-hover">
table-sm Table with a small size. <table class="table table-sm">
table-*-responsive Makes a table responsive by cropping a wide table and making it scrollable horizontally.Can be sm,md,lg or xl. <table class="table table-sm-responsive"><!-- ... table content --></table>
table-secondary(bootstrap table styles)It adds blue background to table. <tr class="table-primary">
table-success(bootstrap table styles)It adds specific colour background to the table. <tr class="table-primary">
table-info (bootstrap table styles)It adds blue background to the table. <tr class="table-info">
table-warning(bootstrap table styles)It adds yellow colour background to table. <tr class="table-warning">
table-danger (bootstrap table styles)It adds red/pink background to table. (bootstrap table styles)It adds red/pink background to table
table-light (bootstrap table styles)It adds light background to table. <tr class="table-light">
table-dark (bootstrap table styles)It adds dark (grey/black) background to table.  <tr cl<tr class="table-light">


Discussion

No Comment Found

Related InterviewSolutions