and here is my index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Import Excel Ke Database Dengan Laravel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<center>
<h2>Import Excel Ke Database Dengan Laravel</h2>
<h3><a target="_blank" href="https://www.malasngoding.com/">www.malasngoding.com</a></h3>
</center>
{{-- notifikasi form validasi --}}
@if ($errors->has('file'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('file') }}</strong>
</span>
@endif
{{-- notifikasi sukses --}}
@if ($sukses = Session::get('sukses'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>{{ $sukses }}</strong>
</div>
@endif
<button type="button" class="btn btn-primary mr-5" data-toggle="modal" data-target="#importExcel">
IMPORT EXCEL
</button>
<div class="modal fade" id="importExcel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form method="post" action="/transaksi/import_excel" enctype="multipart/form-data">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Import Excel</h3>
</div>
<div class="modal-body">
{{ csrf_field() }}
<label>Pilih file excel</label>
<div class="form-group">
<input type="file" name="file" required="required">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Import</button>
</div>
</div>
</form>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
I'm using laravel 8.6 and php.
There is my table code, I was tried add container-fluid but still didn't work
<table class='table table-bordered'>
<thead>
<tr>
<th>No</th>
<th>id_subdist</th>
<th>id_toko</th>
<th>id_dso</th>
<th>id_rso</th>
<th>id_channel</th>
<th>id_outlet</th>
<th>id_produk</th>
<th>qty_pcs</th>
<th>harga</th>
<th>nama_promo</th>
<th>free_goods</th>
<th>total_qty_include_free_goods</th>
<th>disc_total</th>
<th>jumlah</th>
<th>tgl_posting</th>
<th>tgl_faktur</th>
<th>created_date</th>
<th>modified_by</th>
<th>modified_date</th>
<th>status</th>
</tr>
</thead>
<tbody>
@php $i=1 @endphp
@foreach($transaksi as $s)
<tr>
<td>{{ $i }}</td>
<td>{{$s->id_subdist}}</td>
<td>{{$s->id_toko}}</td>
<td>{{$s->id_dso}}</td>
<td>{{$s->id_rso}}</td>
<td>{{$s->id_channel}}</td>
<td>{{$s->id_outlet}}</td>
<td>{{$s->id_produk}}</td>
<td>{{$s->qty_pcs}}</td>
<td>{{$s->harga}}</td>
<td>{{$s->nama_promo}}</td>
<td>{{$s->free_goods}}</td>
<td>{{$s->total_qty_include_free_goods}}</td>
<td>{{$s->disc_total}}</td>
<td>{{$s->jumlah}}</td>
<td>{{$s->tgl_posting}}</td>
<td>{{$s->tgl_faktur}}</td>
<td>{{$s->created_date}}</td>
<td>{{$s->modified_by}}</td>
<td>{{$s->modified_date}}</td>
<td>{{$s->status}}</td>
</tr>
@endforeach
</tbody>
</table>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
CodePudding user response：
Use container-fluid class instead of container class if you want full-screen layout.
Your Code:
<div class="container">
...
</div>
Change it to:
<div class="container-fluid">
...
</div>
The container class is a fixed width container, meaning its max-width changes at each breakpoint. And .container-fluid is a full width container, spanning full screen of the viewport. Read more at Bootstrap Docs
