How Do You Put a Space Between Two Rows in a Bootstrap Table

Tables are the components that help to organize the data. Bootstrap provides multiple classes that are utilized for creating different tables, such as “table-borderless” which creates a borderless table, “table-dark” which is used to create a dark-colored table, “table-bordered” utilized for making tables with borders, and many more. More specifically, the “border-collapse” and “border-spacing” properties are used to add space between the table rows.

This write-up will describe:

How to Create a Bordered Table in Bootstrap?

The bordered table is created using the <table> element with the class “table-bordered”. Following are the instructions to create a table:

    • First, add the “<table>” tag with the “table” and “table-bordered” classes.
    • The “<thead>” tag is used for creating the header part, and the “<tbody>” tag is used to specify the body part.
    • The “<tr>” tag creates rows of the table, the “<th>” tag adds headings and the “<td>” tag includes the table data.


<table class=" table table-bordered">
   <td>Software Engineer</td>


How to Add Space Between the Table Rows in Bootstrap?

To add spaces between the table rows, the CSS “border-collapse” and “border-spacing” properties are used. The CSS “border-collapse” property with the value assigned as “separate” keeps the table border separate. Whereas the “border-spacing” property adds space between the borders.

Style “table” Class

.table {
 border-collapse: separate;
 border-spacing: 0 2px;

As you can see in the below-provided image, the spaces between the table rows have been added successfully:

This is how you can put a space between rows in the Bootstrap table.


To add spaces between the table rows, first, create a table using the <table> element. Add the “table” and “table-bordered” classes to the “<table>” element to provide general styles and borders to it, respectively. Then, add the spaces between the rows using the CSS “border-spacing” property. This property works with the “border-collapse” property having value “separate”. This write-up has described how to put space between the rows in the Bootstrap table.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.