-1

It spans rows columns, but how do I make bootstrap 5 span multiple rows? I want to make a collage with images, and I would like the collage to look like this:

https://i.stack.imgur.com/JjnF0.png

(guess I don't have a good reputation yet...)

But anyhow, this is the code I have:

<div class="container">
            <div class="row">
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
                <div>
                    <img src="flowers.jpg" alt="placeholder">
                </div>
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
            <div>
                <img src="flowers.jpg" alt="placeholder">
            </div>
        </div>

It's set up to make a grid but... I can't seem to figure out how to make some of the elements span multiple rows. Why columns and not rows?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
BanAnna
  • 11
  • 3

1 Answers1

0

There are different ways to achieve something like this. There are these I use quite a lot.

  • You can create a column which contains more than one row 
    <div class="container">
  <div class="row">
    <div class="col">Outer row 1, column 1 - spans two rows (column 2 has two rows)</div>
    <div class="col">
      <div class="row">
        <div class="col">Inner row 1, column 1</div>
        <div class="col">Inner row 1, column 2</div>
      </div>
      <div class="row">
        <div class="col">Inner row 2, column 1</div>
        <div class="col">Inner row 2, column 2</div>
        <div class="col">Inner row 2, column 3</div>
      </div>
    </div>
    <div class="col">Outer row 1, column 3 - spans two rows (column 2 has two rows)</div>
  </div>
</div>
  • You can use the row-cols-* classes 
    <div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Of course, you can use col-*-* to specify how exactly you want your columns to look and behave. There are lots of examples and useful info in the official grid system documentation.

Danijela Popović
  • 92
  • 8