Bootstrap - Make content go to a new line

Question

I'm trying to define a particular layout to render a list of objects.
I'm using angular and bootstrap and I would like to use a for loop (ngFor) to cycle through the list.
Each row of the table should have three elements.
This is how it should look like (indexes of the array inside the grid):

|-------------|-------------|-------------|
|      0      |      1      |      2      |
|-------------|-------------|-------------|
|      3      |      4      |      5      |
|-------------|-------------|-------------|
[...]
|-------------|-------------|-------------|
|     n-1     |      n      |    empty    |
|-------------|-------------|-------------|

I know I can combine bootstrap row and bootstrap col to divide the array in three elements per line.
But I would like to know if there is a way to render the 4th element (and the 7th and so on) in a new line without using the bootstrap row.
I mean, is there a way to define the width of the container of the list so that when its width is fulfilled the next element goes in a new line?
This would substantially simplify the structure of the for loop.

score 0 · Answer 1 · answered Apr 06 '20 at 13:53

I tried to guess your issue and writing the solution
You want to show the new element in new line, for that you can write like below code

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

So from the above code, the "test 8" will show in new line
Please let me know if this is what you expected or I didn't understand

score 0 · Accepted Answer · answered Apr 06 '20 at 14:19

You don't need a new row. Read the docs...

"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line."

   <div class="row">
        <div class="col-4">
            1
        </div>
        <div class="col-4">
            2
        </div>
        <div class="col-4">
            3
        </div>
        <div class="col-4">
            4
        </div>
        ...
    </div>

https://codeply.com/p/pRaYHIjdNv

Bootstrap 3 - Use more than 12 columns in a row

Bootstrap - Make content go to a new line

2 Answers2