bootstrap-4flexboxrowcol

BootStrap : row don't work to contain two column at one row


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 : enter image description here 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


Solution

  • there was an mistake in code I deleted this row and it is fine now :

    <div class="d-flex justify-content-around py-2 ">