Why is the div row giving me columns? - html

Question

I need to get the grid. 3-4 cards in a row. I am using row div but you are using data as column. Why?
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
enter image description here

Answer 1

You seem to have each column wrapped in its own row, hence they fall underneath each other. Try putting both columns in the same row element. Something like this might solve you problem
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
EDIT:
If you want to use a for/foreach loop, your code will look something like this:
<div class="row">
#foreach(var item in data){
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
#item.Quantity<br>
#item.Price<br>
#item.Name<br>
<hr>
</h3>
</div>
}
</div>