How do I create multi-row columns in Bootstrap 3 and Bootstrap 4?

Multi-Row Bootstrap Columns

Problem:
Creating a Bootstrap grid where a specific column spans multiple rows, particularly when boxes are generated programmatically in sequence.

Solution:

Bootstrap 3:

1. Create an outer .row div to define the overall content width.
2. Inside the outer row, add the column div (
   ) to span two rows.
3. Create another inner .row within the two-row column.
4. Add child column divs (
   ) within the inner row(s) as needed to fill the remaining space.

Bootstrap 4:

1. Create an outer .container or .container-fluid div to define the content width.
2. Add an outer .row div.
3. Inside the outer row, add the column div (
   ) to span two rows.
4. Create another inner .row within the two-row column using .w-100 class on the inner column div (
   ) to force it to span the full width.
5. Add child column divs (
   ) within the inner row(s) as needed to fill the remaining space.

Example Code:

Bootstrap 3:

<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><p><strong>Bootstrap 4:</strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
  <div class="row">
    <div class="col">
      <div class="well">1
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">2</div>
      </div>
      <div class="col">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">4</div>
      </div>
      <div class="col">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div>

The above is the detailed content of How do I create multi-row columns in Bootstrap 3 and Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!