I have this laravel page which contain bootstrap page with media print,I have row contain two columns I want to display both column in same row :
@extends('layouts.app')
@section('content')
<div class="container" dir="rtl">
<div class="flex-row d-flex justify-content-around">
{{-- First Class --}}
<div class="col-6">
<div class="d-flex justify-content-around py-2 text-white text-dark">
<div>وانا ئێكێ</div>
<div>دەمژمێر</div>
<div>08:30</div>
</div>
<div class="d-flex justify-content-around py-2 ">
<table class="w-100 table table-bordered table-striped">
<thead class="thead-dark ">
<tr class="text-center">
<th class="" scope="col">#</th>
<th scope="col">قوتابی</th>
<th scope="col">مولەت</th>
</tr>
</thead>
<tbody>
@php
$counter=0;
@endphp
@foreach ($absences as $item)
@if ($item->time=="08:30")
<tr>
<td>{{$counter}}</td>
<td class="text-right pr-2">{{$item->stud}}</td>
<td class="text-center">{{$vacation}}</td>
</tr>
@endif
@endforeach
</tbody>
</table>
</div>
<div class="col-6">
<div class="d-flex justify-content-around py-2 text-white text-dark">
<div>وانا ئێكێ</div>
<div>دەمژمێر</div>
<div>09:30</div>
</div>
<div class="d-flex justify-content-around py-2 ">
<table class="w-100 table table-bordered border-black ">
<thead class="thead-dark ">
<tr class="text-center">
<th class="" scope="col">#</th>
<th scope="col">قوتابی</th>
<th scope="col">مولەت</th>
</tr>
</thead>
<tbody>
@php
$counter=0;
@endphp
@foreach ($absences as $item)
@if ($item->time=="09:30")
<tr>
<td>{{$counter}}</td>
<td class="text-right pr-2">{{$item->stud}}</td>
<td class="text-center">{{$vacation}}</td>
</tr>
@endif
@endforeach
</tbody>
</table>
</div>
</div>
</page>
</div>
@else
<div class="m-auto">No Data</div>
@endif
@endsection
it is display as shown in image below : as it is shown in image the two columns didn't preview in same row How can I solve it? I used row class and d-flex but not work
there was an mistake in code I deleted this row and it is fine now :
<div class="d-flex justify-content-around py-2 ">