Bootstrap :Put box component next to each other in Laravel

Hi, I'm creating box and I want to put them next to each other but I can't. After looping, the box will become one box per row. Anyone know how to change it? Thanks

<div class="container">
    <h2 class="mb-4">Property</h2>
    @foreach($properties as $property)
    <div class="card-columns">
        <div class="card" style="width: 18rem;">
            <div style="height:200px; width:18rem;overflow:hidden;">
                <img class="card-img-top" src="{{$property->photopath}}" alt="Card image cap">
            </div>
            <div class="card-body">
                <h5 class="card-title">{{$property->propertyname}}</h5>
                <p>Type: {{$property->propertytype}}</p>
                <p>Area: {{$property->area}}</p>

                <h5> @money($property->price)</p>
            </div>
        </div>
    </div>
    @endforeach
    <!-- Pagination -->
    <div class="d-flex justify-content-center pt-2">
        {{ $properties->links() }}
    </div>
</div>

automica

5 years ago

Best Answer

Level 54

@hueilau use flexbox to do it. add the css part in my example.

<!DOCTYPE html>
<html>
<head>
<style>
.card-columns {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.card-columns > .card {
  width: 100%;
  background-color:#fff;
  margin: 10px;
  text-align:center;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="card-columns">
  <div class='card'>1</div>
  <div class='card'>2</div>
  <div class='card'>3</div>  
  <div class='card'>4</div>
</div>

</body>
</html>

you'll also want to move your wrapping div outside your loop.

    <div class="card-columns">
        @foreach($properties as $property)
        <div class="card" style="width: 18rem;">
            <div style="height:200px; width:18rem;overflow:hidden;">
                <img class="card-img-top" src="{{$property->photopath}}" alt="Card image cap">
            </div>
            <div class="card-body">
                <h5 class="card-title">{{$property->propertyname}}</h5>
                <p>Type: {{$property->propertytype}}</p>
                <p>Area: {{$property->area}}</p>

                <h5> @money($property->price)</p>
            </div>
        </div>
        @endforeach
    </div>

hueilau

5 years ago

Level 1

thanks! you are always so helpful!

Please or to participate in this conversation.