Why is the div row giving me columns?-CodePudding

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 >
            <div >
                <div ></div>
                <div ></div>
                <h3 >
                           {{$item->quantity}}<br>
                           {{$item->price}}<br>
                           {{$item->dish->name}}<br>
                           <hr>
                </h3>
            </div>
        </div>

enter image description here

CodePudding user response：

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 >
 <div >
            <div ></div>
            <div ></div>
            <h3 >
                       {{$item->quantity}}<br>
                       {{$item->price}}<br>
                       {{$item->dish->name}}<br>
                       <hr>
            </h3>
        </div>
 <div >
            <div ></div>
            <div ></div>
            <h3 >
                       {{$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 >
@foreach(var item in data){
<div >
  <div ></div>
  <div ></div>
  <h3 >
   @item.Quantity<br>
    @item.Price<br>
    @item.Name<br>
    <hr>
  </h3>
</div>
}
</div>