Placing two rows on the same line with bootstrap elements

Question

I would like to display two rows (tr) on the same line with equal width. I tried adding col-sm-6 to the tds, but it's the trs are getting displayed on two separate lines. Here's the html:

<div className="jumbotron col-sm-12 text-left row">
                    <div className="panel panel-info">
                        <div className="panel-heading">
                            HEADER
                        </div>
                    </div>

                    <table className="table table-bordered table-condensed table-responsive">
                        <tbody>
                             <tr>
                                <td className="col-sm-6 col-centered leftCol">
                                    <div>
                                        {"hello1"}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td className="col-sm-6 col-centered rightCol">
                                    <div>
                                        {'hello2'}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — Kasnady, Oct 23 '17 at 16:01

Aliaga Aliyev · Answer 1 · 2017-10-23T16:04:23.283

    <div className="jumbotron col-sm-12 text-left row">
                        <div className="panel panel-info">
                            <div className="panel-heading">
                                HEADER
                            </div>
                        </div>
    
                        <table className="table table-bordered table-condensed table-responsive">
                        <tbody>
                             <tr>
                                <td className="col-sm-6 col-centered leftCol">
                                    <div>
                                        {"hello1"}
                                    </div>
                                </td>
                                <td className="col-sm-6 col-centered rightCol">
                                    <div>
                                        {'hello2'}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

score 0 · Answer 2 · answered Oct 23 '17 at 16:00

<div className="jumbotron col-sm-12 text-left row">
                    <div className="panel panel-info">
                        <div className="panel-heading">
                            HEADER
                        </div>
                    </div>

                    <table className="table table-bordered table-condensed table-responsive">
                        <tbody>
                             <tr>
                                <td className="col-sm-6 col-centered leftCol" style="height: 200px;">
                                    <div>
                                        {"hello1"}
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td className="col-sm-6 col-centered rightCol" style="height: 200px;">
                                    <div>
                                        {'hello2'}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

Adding style will do it.

score 0 · Accepted Answer · answered Oct 23 '17 at 16:01

You will have to insert class col-sm-6 for tr tags if you want them on same line.

Here is the working fiddle of your code

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div className="jumbotron col-sm-12 text-left row">
  <div className="panel panel-info">
    <div className="panel-heading">
      HEADER
    </div>
  </div>

  <table className="table table-bordered table-condensed table-responsive">
    <tbody>
      <tr class="col-sm-6">
        <td className="col-centered leftCol">
          <div>
            {"hello1"}
          </div>
        </td>
      </tr>
      <tr class="col-sm-6">
        <td className="col-centered rightCol">
          <div>
            {'hello2'}
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

If code here is not running, it could be due to failure to load bootstrap files. Try from fiddle — imacoder, Oct 23 '17 at 16:04
the 2 rows are being displayed correctly now, but the `td`'s width are incorrect. Id like the `td`s to span throught the row they're in — ssss, Oct 23 '17 at 16:12

Placing two rows on the same line with bootstrap elements

3 Answers3