How to make three button in div responsive?

I am using Bootstrap 4 and getting issue about button responsiveness in div. I have Search bar, enter image description here

when i shrink the tab then its display like this, enter image description here I have following code,

 <div class="col-12" style="margin-bottom: 15px !important;">
            <form method="get" action="{{route('invoice.index')}}" id="invoice_search">
                <div class="row" style="background: #f8f9fa !important; padding: 10px;">
                    <div class="col-lg-3 col-md-12"  style="margin-bottom: 5px; margin-top: 5px;">
                        <select name="provider" class="form-control">
                            <option value="">{{__('dashboard.invoicesView.provider')}}</option>
                            @forelse($providers as $provider)
                                <option value="{{$provider->provider}}" {{(request()->get('provider') === $provider->provider) ? 'selected' : ''}}>{{{$provider->provider}}}</option>
                            @empty
                            @endforelse
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-12" style="margin-bottom: 5px; margin-top: 5px;">
                        <input type="text" readonly style="background: #00000000 !important;" class="form-control invoice_date_range" value="{{request()->has('start_date') ? \Carbon\Carbon::parse(request()->get('start_date'))->format('m/d/Y') : '01/01/2021'}} - {{request()->has('end_date') ? \Carbon\Carbon::parse(request()->get('end_date'))->format('m/d/Y') : '01/15/2021'}}" />
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                    </div>
                    <div class="col-lg-3 col-md-12 irs-demo"  style="margin-bottom: 5px; margin-top: 5px;">
                        <input type="text" id="range_03" value="" />
                        <input type="hidden" name="min_amount" id="min_amount">
                        <input type="hidden" name="max_amount" id="max_amount">
                    </div>
                    <div class="col-lg-3 col-md-12 align-center" style="margin-top: 5px;">
                        <button type="submit" class="btn btn-default">{{__('dashboard.invoicesView.search')}}</button>
                        <a href="{{route('invoice.index')}}" class="btn btn-default" title="Clear Filter">
                            <img src="{{asset('img/icon/clear-filters.png')}}" id="clear_filter" style="width: 20px; height: 20px;">
                        </a>
                        <button type="button" name="invoice_upload" class="btn btn-default" data-toggle="modal" data-target=".upload-invoice-modal">{{__('dashboard.invoicesView.uploadInvoice')}}</button>
                    </div>
                </div>
            </form>
        </div>

How can i make align in line for large and medium devices. Thanks



Read more here: https://stackoverflow.com/questions/65702804/how-to-make-three-button-in-div-responsive

Content Attribution

This content was originally published by Irshad Khan at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: