The cards do not form rows inside the class row

Question

The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).

It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.

    <row>
        {{#each schdData.logs}}
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <p class="card-text">{{{objst this}}}</p>
                </div>
            </div>
        </div>
        {{/each}}
    </row>

And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.

Answer 1

Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.

Your code should be as below:

<div class="row">
    {{#each schdData.logs}}
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <p class="card-text">{{{objst this}}}</p>
            </div>
        </div>
    </div>
    {{/each}}
</div>