Bootstrap Table-border

In this article, we will see how to create table-border using bootstrap classes easily. We can also create the border using CSS but it is very easy method. Bootstrap has different designs for table borders like dark, light, etc. We can just set the bootstrap classes to use that easily. Let’s see the examples:

Step by Step Guide to create table-border

1. Create a <div> and set the classname “container“. Inside it create another <div> and set the classname “row“.
2. Inside the row <div>, create <table> tag and set the bootstrap classname “table table-stripped table-bordered” for table bordering.
3. Then inside the <table>, create <thead> and <tbody> tag.
4. Inside the <thead> tag, create table heading using <th> tag. And inside the <tbody> tag, you can create table body using <tr> and <td> tags.
5. After apply these steps correctly, your table-border will display.

HTML:

<div class="container">
   <div class="row">
      <table class="table table-stripped table-bordered">
      <thead>
         <th>S.no</th>
         <th>Name</th>
         <th>Password</th>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>John</td>
            <td>12345</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Leo</td>
            <td>12345</td>
         </tr>   
         <tr>
            <td>3</td>
            <td>Jordon</td>
            <td>12345</td>
         </tr>      
      </tbody>
      </table> 
   </div>
</div>

Output:

If you want to add table hover effect then you need to set the classname “table-hover” to <table> tag as in the below code.

<table class="table-hover table-stripped table-bordered table">
.
.
</table>

Dark Table-border

If you want to create dark theme table, you need to set the classname “table-border” for <table> tag as in the above code:

<table class="table table-dark table-stripped table-bordered">
.
.
.
</table>

Output:

I hope you have understood a little about bootstrap table border. If you have any doubts about this then please comment below. The bootstrap normal border classes is completely different to compare this table-border class.