Finish responsive bootstrap

Author: rappasoft

README.md

@@ -588,7 +588,7 @@ The final result would look like:
 
 ## To-do/Roadmap
 
-- [ ] Bootstrap Templates
+- [x] Bootstrap 4 Template
 - [ ] Test Suite
 - [ ] Column Search
 

resources/views/bootstrap-4/datatable.blade.php

@@ -5,19 +5,19 @@ class="container-fluid"
     @include('livewire-tables::bootstrap-4.includes.sorting-pills')
     @include('livewire-tables::bootstrap-4.includes.filter-pills')
 
-    <div class="d-flex justify-content-between mb-3 p-3 p-md-0">
-        <div class="d-flex">
+    <div class="d-md-flex justify-content-between mb-3">
+        <div class="d-md-flex">
             @include('livewire-tables::bootstrap-4.includes.search')
 
-            <div class="ml-3">
+            <div class="ml-0 ml-md-3 mb-3 mb-md-0">
                 @include('livewire-tables::bootstrap-4.includes.filters')
             </div>
         </div>
 
-        <div class="d-flex">
+        <div class="d-md-flex">
             @include('livewire-tables::bootstrap-4.includes.bulk-actions')
 
-            <div class="ml-3">
+            <div class="ml-0 ml-md-3">
                 @include('livewire-tables::bootstrap-4.includes.per-page')
             </div>
         </div>

resources/views/bootstrap-4/includes/bulk-actions.blade.php

@@ -1,10 +1,10 @@
 @if (count($bulkActions))
-    <div class="dropdown">
-        <button class="btn dropdown-toggle" type="button" id="bulkActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    <div class="dropdown mb-3 mb-md-0 d-block d-md-inline">
+        <button class="btn dropdown-toggle d-block w-100 d-md-inline" type="button" id="bulkActions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {{ __('Bulk Actions') }}
         </button>
 
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActions">
+        <div class="dropdown-menu dropdown-menu-right w-100" aria-labelledby="bulkActions">
             @foreach($bulkActions as $action => $title)
                 <a href="#" wire:click.prevent="{{ $action }}" class="dropdown-item">{{ $title }}</a>
             @endforeach

resources/views/bootstrap-4/includes/filter-pills.blade.php

@@ -1,5 +1,5 @@
 @if ($showFilters && count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
-    <div wire:key="filter-badges" class="p-2 p-md-0 mb-3">
+    <div wire:key="filter-badges" class="mb-3">
         <small class="text-secondary">@lang('Applied Filters'):</small>
 
         @foreach($filters as $key => $value)

resources/views/bootstrap-4/includes/filters.blade.php

@@ -1,6 +1,6 @@
 @if ($filtersView || count($customFilters))
-    <div class="btn-group">
-        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    <div class="btn-group d-block d-md-inline">
+        <button type="button" class="btn dropdown-toggle d-block w-100 d-md-inline" data-toggle="dropdown">
             {{ __('Filters') }}
 
             @if (count(array_filter($filters)) && !(count(array_filter($filters)) === 1 && isset($filters['search'])))
@@ -11,7 +11,7 @@
 
             <span class="caret"></span>
         </button>
-        <ul class="dropdown-menu" role="menu">
+        <ul class="dropdown-menu w-100" role="menu">
             <li>
                 @if ($filtersView)
                     @include($filtersView)

resources/views/bootstrap-4/includes/pagination.blade.php

@@ -1,10 +1,10 @@
 @if ($showPagination)
     <div class="row">
-        <div class="col">
+        <div class="col-12 col-md-6">
             {{ $rows->links() }}
         </div>
 
-        <div class="col text-right text-muted">
+        <div class="col-12 col-md-6 text-center text-md-right text-muted">
             @lang('Showing :first to :last out of :total results', [
                 'first' => $rows->count() ? $rows->firstItem() : 0,
                 'last' => $rows->count() ? $rows->lastItem() : 0,

resources/views/bootstrap-4/includes/search.blade.php

@@ -1,5 +1,5 @@
 @if ($showSearch)
-    <div class="input-group">
+    <div class="mb-3 mb-md-0 input-group">
         <input
             wire:model.debounce.250ms="filters.search"
             placeholder="{{ __('Search') }}"

resources/views/bootstrap-4/includes/sorting-pills.blade.php

@@ -1,5 +1,5 @@
 @if ($showSorting && count($sorts))
-    <div wire:key="sort-badges" class="p-2 p-md-0 mb-3">
+    <div wire:key="sort-badges" class="mb-3">
         <small class="text-secondary">@lang('Applied Sorting'):</small>
 
         @foreach($sorts as $col => $dir)