Bootstrap Location Box Gap

{{– Display Featured Image –}}
@if (has_post_thumbnail())

@endif

{{ get_the_title() }}
{{get_field('location_address')}},{{get_field('location_zip')}} {{get_field('location_name')}}
{{__('Tel.','sage') }}: {{get_field('location_phone')}}

{{__('Öffnungszeiten') }}:{{get_field('hours_service')}}

@endwhile
@php wp_reset_postdata(); @endphp
@else
No locations found.
@endif

when I'm adding gap to location-container its coming in next line , I have 3 boxes now

### Possible Fixes:

#### 1. Use `g-0` in Bootstrap Grid Instead of `gap`
Bootstrap's grid system already handles spacing between columns and rows properly:

<div class="location_container row g-3">

Then, remove `flex-wrap` from `.location_container` since `row` already manages wrapping.

#### 2. Use `gap` with `calc()`
If you prefer using `gap`, you need to account for the extra space it introduces:

.location_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust as needed */
}

.location-box {
    width: calc(33.33% - 20px); /* Adjust width based on gap */
}

This ensures three items fit in a row while considering the `gap`.

#### 3. Use Bootstrap's Grid with `gap`
Modify your structure to use Bootstrap’s row and column system efficiently:

<div class="location_container row">
    @if ($query->have_posts())
        @while ($query->have_posts()) 
            @php $query->the_post(); @endphp
            <div class="col-12 col-md-6 col-lg-4 mb-3"> <!-- Use Bootstrap's spacing -->
                <div class="location-box d-flex flex-column">
                    @if (has_post_thumbnail())
                        <div class="fetured-img">
                            <img src="{{ get_the_post_thumbnail_url(null, 'full') }}" class="img-thumbnail" alt="{{ get_the_title() }}">
                        </div>
                    @endif
                    <div class="location-detail">
                        <div class="location-inner">
                            <h5>{{ get_the_title() }}</h5>
                            <p class="location-address">{{get_field('location_address')}},<br>{{get_field('location_zip')}} {{get_field('location_name')}}</p>
                            <p class="location-phone">{{__('Tel.','sage') }}: <span class="blue-text">{{get_field('location_phone')}}</span></p>
                        </div>
                        <p class="location-time"><span>{{__('Öffnungszeiten') }}:</span><br>{{get_field('hours_service')}}</p>
                    </div>
                </div>
            </div>
        @endwhile
        @php wp_reset_postdata(); @endphp
    @else
        <p>No locations found.</p>
    @endif
</div>

Here:
– `.location_container` has `row` class (Bootstrap handles wrapping).
– `.col-lg-4` keeps three items per row on large screens.
– `mb-3` adds spacing between rows.

This should prevent the unwanted wrapping while keeping a clean layout. 🚀 Let me know if you need further tweaks!

{{– Display Featured Image –}}
@if (has_post_thumbnail())

@endif

{{ get_the_title() }}
{{get_field('location_address')}},{{get_field('location_zip')}} {{get_field('location_name')}}
{{__('Tel.','sage') }}: {{get_field('location_phone')}}

{{__('Öffnungszeiten') }}:{{get_field('hours_service')}}

@endwhile
@php wp_reset_postdata(); @endphp
@else
No locations found.
@endif

WHAT TO FOR tion-boxFLEX-1 IN loca

### Solution:
Modify your CSS like this:

.location_container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust as needed */
}

.location-box {
    flex: 1; /* Makes each box take equal space */
    min-width: calc(33.33% - 20px); /* Ensures 3 items per row with gap */
    max-width: calc(33.33% - 20px); /* Prevents it from stretching too much */
    box-sizing: border-box; /* Ensures padding/margin doesn’t affect size */
}

### Explanation:
– `flex: 1` ensures `.location-box` takes equal space.
– `min-width` & `max-width` with `calc(33.33% – 20px)` keep three items per row.
– `gap: 20px` adds spacing between boxes.

If you want responsiveness, use media queries:

@media (max-width: 992px) {
    .location-box {
        min-width: calc(50% - 20px); /* Two per row on tablets */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    .location-box {
        min-width: 100%; /* Full width on small screens */
        max-width: 100%;
    }
}

This will:
✅ Keep 3 items per row on large screens.
✅ Adjust to 2 per row on tablets.
✅ Show 1 per row on mobile.

Let me know if you need more refinements! 🚀