How to Make a Bootstrap 3 Column Span Multiple Rows?

Spanning Bootstrap Columns Across Multiple Rows

Creating a grid layout with Bootstrap can be a straightforward task. However, when faced with the challenge of having a column span multiple rows, it can be a bit perplexing. This guide will demonstrate how to achieve this using Bootstrap 3.

Solution for Bootstrap 3:

To create a column that spans two rows in Bootstrap 3, follow these steps:

<div class="row">
  <div class="col-md-4">
    <div class="well">
      1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          2
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          3
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">
          4
        </div>
      </div>
      <div class="col-md-6">
        <div class="well">
          5
        </div>
      </div>
    </div>
  </div>
</div>

Explanation:

In this HTML code, we create a two-row grid. The first row contains one column spanning four units, while the second row contains two columns each spanning two units. The column in the first row spans two rows because it is not contained within the nested row structure.

The above is the detailed content of How to Make a Bootstrap 3 Column Span Multiple Rows?. For more information, please follow other related articles on the PHP Chinese website!