I'm trying to create a row with 3 columns - one for pagination count, one for table filtering, and another for a button.
Everything is fine on small, medium, and large screens but when I maximize the window, there's a big gap above the table. Refer to the image below at the bottom.
https://i.sstatic.net/VsW1a.png
I've tried various combinations of flex-fill, w-100, etc. to make it expand to 100% width on extra-large screens but couldn't get it right. Any ideas?
Here's the relevant code section above the table:
<div class="col">
<div class="container no-padding">
<div class="row mt-1">
<div class="col d-none d-md-block no-padding">
<p>Showing {{ $assets->firstItem() }}-{{ $assets->lastItem() }} of {{ $assets->total() }} total</p>
</div>
<div class="col-auto flex-fill flex-md-grow-0 no-padding mb-3">
<div class="container">
<div class="row">
<div class="col m-0 p-0 mr-2">
<form class="form-inline">
<div class="input-group">
<input style="font-size:80%;" class="form-control" type="text" name="filter" value="" placeholder="Filter results">
</div>
</form>
</div>
<div class="no-padding">
<a class="btn btn-dark btn-sm mr-1" href="{{ action('AddAssetController@index') }}" role="button"><i style="font-size:80%;" class="fas fa-plus"></i> New Asset</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Edit:
This is the code from my template. The previous code is part of @section('content'), which is output and parsed by @yield('content') below.
<div class="row">
<div class="col-12 no-padding">
@include('layout.includes.header')
</div>
</div>
<div class="row h-100">
<div class="col-12">
<!-- Begin nav/content row -->
<div class="row h-100">
<div id="sidebar-wrapper" class="visible">
@include('layout.includes.nav')
</div>
<div class="col content" style="overflow-x:auto;">
<div class="row no-padding">
<div class="col d-none d-sm-block">
<h4>@yield('content-heading')</h4>
</div>
<div class="col flex-grow-1">
@include('layout.includes.searchform')
</div>
</div>
<div class="row no-padding inner-box shadow p-3 mb-5 bg-white rounded">
@yield('content')
</div>
</div>
</div>
<!-- END main column -->
</div>
</div>