In this tutorial we’ll be taking a look at tables in Bootstrap. Bootstrap handles tables differently, in the way that it doesn’t apply any default styling. This is because there are many plugins/components that make use of tables and it would be really annoying if Bootstrap interfered with those.
Starting code for this tutorial
Since Bootstrap doesn’t apply any default styling to tables, I decided to start this tutorial off with the table below, inside of the basic template. For this tutorial, we’ll only be adding classes to the
<table> and <tr> tags, so to simplify things, I kept anything within these tags hidden in the video above.
<div class="container">
<div class="row">
<div class="col-xs-12">
<table>
<tr>
<th>#</th><th>First Name</th><th>Last Name</th><th>Percentage/Year Mark</th>
</tr>
<tr>
<td>1</td><td>Sean</td><td>Pooley</td><td>92%</td>
</tr>
<tr>
<td>2</td><td></td><td>Schwulst</td><td>88%</td>
</tr>
<tr>
<td>3</td><td>Kyle</td><td>Beecham</td><td>86%</td>
</tr>
</table>
</div>
</div>
</div>
Adding styling to tables in Bootstrap
To add Bootstrap’s table styles to a table, all you have to do is simply add the
.table class to the <table> element, and your table instantly looks a lot better.
<table class="table">
Striped tables
To add a darker background to alternating rows we can use the
.table-striped class.
<table class="table table-striped">
Bordered tables
The
.table-bordered class will add a border around the entire table.
<table class="table table-bordered">
Adding a hover effect
Adding the
.table-hover class will add a hover effect to the table row that the mouse is currently hovering over.
<table class="table table-hover">
Condensed tables
Tables can also be condensed to take up less space with the
.table-condensed class.
<table class="table table-condensed">
Using multiple classes
It’s also possible to apply multiple classes to the same table, so you can have a condensed striped table.
<table class="table table-condensed table-striped">
Styling rows
Table rows also have specific classes. The
.active class can be used to mark an active row, and any one of the.danger.success.warning or .info contextual classes can be added to table rows to provide visual feedback to the user.
<tr class="active">
<tr class="success">
0 comments