CODEWITHSUNDEEP
htmlbootstrap-4
Dimnox
Dimnox

Reputation: 471

Bootstrap - Two rows on the same line

I would like to display two rows in one line with Bootstrap. I don't think it's a complex issue but none of my solutions worked yet.

<table class="table">
  <tbody>
    <tr><td>First Row - Part 1</td></tr>
    <tr><td>First Row - Part 2</td></tr>
    <tr><td>Second Row - Part 1</td></tr>
    <tr><td>Second Row - Part 2</td></tr>
  </tbody>
</table>

The result should look like this:

<First Row - Part 1> <First Row - Part 2>

<Second Row - Part 1> <Second Row - Part 2>

Please note that the structure is strict. I cannot move the second td elements into tr. I appreciate any help.

Upvotes: 0

Views: 332

Answers (1)

Brian Burton
Brian Burton

Reputation: 3842

You don't need Bootstrap, just a flex box.

.table tbody {
  display: flex;
  flex-directon: row;
  width: 300px;
  flex-wrap: wrap;
}

.table tbody tr {
  flex: 1 0 50%;
}

.table td {
  border: 1px solid #000;
}
<table class="table">
  <tbody>
    <tr><td>First Row - Part 1</td></tr>
    <tr><td>First Row - Part 2</td></tr>
    <tr><td>Second Row - Part 1</td></tr>
    <tr><td>Second Row - Part 2</td></tr>
  </tbody>
</table>

Upvotes: 1

Related Questions