TUTORIAL TABLE BOOTSTRAP

Hey guys, now I want to share again, and again bootstrap hehe this time I want to share how to explore the bootstrap framework. There are many things that we can explore using bootstrap. Continue to monitor UI UX First, so that you can increase your knowledge.

Now I want to share the main components in Bootstrap. The main components provided by bootstrap are very many, including icons, dropdowns, buttons, input forms, pagination, and many more. So this time what I want to share is Table.

Bootstrap Basic Table

This is the basic table of bootstrap. Using the .table class inside the tag, let’s give it a try.

Enter the following code:

The result will be as follows
1
Now we can try the code directly, CLICK HERE. We can edit & view the results of this online code

Bootstrap Striped Rows Table

This one is a bootstrap table with different row colors between odd and even rows, let’s try

Enter the following code:

<div class="col-xs-12">
<h2>Striped Rows</h2>
<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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>

The result will be as follows
2
This is the online code, bro, HERE

Bootstrap Bordered Table

This one is a bootstrap table with a border on each side, let’s try

Enter the following code:

<div class="col-xs-12">
<h2>Bordered Table</h2>
<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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>

Bootstrap Contextual Classes Table

This one is a bootstrap table with different colors, this difference is according to the context of the table that we create. . For example red table for failed content and green table for successful content, let’s try

  1. Enter the following code:
<div class="col-xs-12">
<h2>Contextual Classes</h2>
<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>[email protected]</td>
</tr>
<tr class="danger">
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>

Actually there are many more that we can explore, this tutorial only guides for the basic steps. just a lot of googling. Good luck