diff --git a/examples/peewee_simple/main.py b/examples/peewee_simple/main.py
index 037e3172e..5399a7efa 100644
--- a/examples/peewee_simple/main.py
+++ b/examples/peewee_simple/main.py
@@ -1,3 +1,5 @@
+import datetime
+import random
 import uuid
 
 import peewee
@@ -152,4 +154,21 @@ def index():
         BookCategory.get_or_create(isbn=book1, category=cat1)
         BookCategory.get_or_create(isbn=book2, category=cat2)
 
+        # Seed additional users and posts for list pagination verification
+        users = []
+        for idx in range(1, 21):
+            user, _ = User.get_or_create(
+                username=f"user{idx}",
+                defaults={"email": f"user{idx}@example.com"},
+            )
+            users.append(user)
+
+        for idx in range(1, 51):
+            Post.create(
+                title=f"Sample Post {idx}",
+                text=f"Lorem ipsum dolor sit amet, generated entry {idx}.",
+                date=datetime.datetime.utcnow() - datetime.timedelta(days=idx),
+                user=random.choice(users),
+            )
+
     app.run(debug=True)
diff --git a/flask_admin/static/admin/css/bootstrap4/admin.css b/flask_admin/static/admin/css/bootstrap4/admin.css
index 0683a3b3b..32f931dab 100644
--- a/flask_admin/static/admin/css/bootstrap4/admin.css
+++ b/flask_admin/static/admin/css/bootstrap4/admin.css
@@ -23,7 +23,8 @@
 
 /* List View - fix checkbox column width */
 .list-checkbox-column {
-    width: 14px;
+    width: auto;
+    min-width: 40px;
 }
 
 /* List View - fix overlapping border between actions and table */
@@ -43,31 +44,166 @@
     white-space: nowrap;
 }
 
+/* List control tabs */
+.nav-tabs.nav-list-controls {
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.nav-tabs.nav-list-controls .nav-item {
+    margin-right: 0.5rem;
+    margin-bottom: 0.4rem;
+}
+
+.nav-tabs.nav-list-controls .nav-link {
+    white-space: nowrap;
+}
+
+.nav-item.nav-search {
+    order: 1;
+    margin-bottom: 0;
+    margin-left: auto;
+}
+
+.nav-item.nav-search .nav-search-form {
+    width: auto;
+}
+
+.nav-search-form {
+    width: auto;
+    min-width: 240px;
+    max-width: 320px;
+}
+
+.nav-search-form .search-controls {
+    width: auto;
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+    align-items: center;
+    flex-direction: row;
+}
+
+.nav-search-form .search-controls .input-group {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.nav-search-form .search-controls button {
+    white-space: nowrap;
+}
+
+.nav-search-form .search-controls .input-group {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.nav-search-form .search-controls input.form-control {
+    min-width: 0;
+}
+
+.nav-search-form .search-controls button {
+    flex: 0 0 auto;
+}
+
+@media (min-width: 576px) {
+    .nav-item.nav-search {
+        max-width: 360px;
+    }
+
+    .nav-tabs.nav-list-controls .nav-item {
+        margin-bottom: 0.25rem;
+    }
+}
+
+@media (max-width: 991px) and (min-width: 577px) {
+    .nav-item.nav-search {
+        margin-left: 0;
+        order: 0;
+        max-width: none;
+    }
+}
+
+@media (max-width: 576px) {
+    .nav-item.nav-search {
+        flex: 1 1 100%;
+        margin-left: 0;
+        max-width: none;
+    }
+
+    .nav-item.nav-search .nav-search-form {
+        width: 100%;
+    }
+
+    .nav-search-form {
+        width: 100%;
+    }
+
+    .nav-search-form .search-controls {
+        width: 100%;
+        flex-direction: column;
+    }
+
+    .nav-search-form .search-controls button {
+        width: 100%;
+    }
+}
+
 /* Filters */
-table.filters {
-    border-collapse: collapse;
-    border-spacing: 4px;
+.filters {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin: 12px 0 20px 0;
+}
+
+.filters:empty {
+    margin: 0;
+}
+
+.filter-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    background-color: #fff;
+}
+
+.filter-label {
+    flex: 0 0 auto;
+    min-width: 160px;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-/* prevents gap between table and actions while there are no filters set */
-table.filters:not(:empty) {
-    margin: 12px 0px 20px 0px;
+.filter-operation {
+    flex: 0 0 auto;
+    min-width: 120px;
 }
 
-/* spacing between filter X button, operation, and value field */
-/* uses tables instead of form classes for bootstrap2-3 compatibility */
-table.filters tr td {
-    padding-right: 5px;
-    padding-bottom: 3px;
+.filter-field {
+    flex: 1 1 auto;
+    min-width: 150px;
 }
 
-/* Filters - Select2 Boxes */
 .filters .filter-op {
-    width: 130px;
+    width: auto;
+    min-width: 120px;
 }
 
 .filters .filter-val {
-    width: 220px;
+    width: auto;
+    min-width: 200px;
+    flex: 1 1 auto;
+}
+
+.filter-label .remove-filter {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
 }
 
 /* Image thumbnails */
@@ -83,6 +219,24 @@ div.container > .admin-form {
     margin-top: 35px;
 }
 
+/* Submit rows */
+.submit-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+}
+
+@media (max-width: 576px) {
+    .submit-row {
+        justify-content: center;
+    }
+    .submit-row .btn {
+        flex: 1 1 auto;
+        min-width: 120px;
+    }
+}
+
 /* Form Field Description - Appears when field has 'description' attribute */
 /* Test with: form_args = {'name':{'description': 'test'}} */
 /* prevents awkward gap after help-block - This is default for bootstrap2 */
@@ -108,3 +262,71 @@ body.modal-open {
 {
     overflow-x: auto;
 }
+
+@media (max-width: 576px) {
+    .table-responsive-mobile .table thead {
+        display: none;
+    }
+
+    .table-responsive-mobile .table tbody tr {
+        display: block;
+        margin-bottom: 1rem;
+        border: 1px solid #dee2e6;
+        border-radius: 0.25rem;
+        padding: 0.5rem;
+    }
+
+    .table-responsive-mobile .table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.5rem 0;
+        border: none;
+        border-bottom: 1px solid #dee2e6;
+    }
+
+    .table-responsive-mobile .table tbody td:last-child {
+        border-bottom: none;
+    }
+
+    .table-responsive-mobile .table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        margin-right: 0.5rem;
+        flex: 1 1 40%;
+    }
+
+    .filters {
+        gap: 0.5rem;
+        margin: 0;
+    }
+
+    .filter-item {
+        flex-direction: column;
+        padding: 0.5rem;
+    }
+
+    .filter-label,
+    .filter-operation,
+    .filter-field {
+        width: 100%;
+    }
+
+    .list-buttons-column {
+        white-space: normal;
+        width: 100%;
+    }
+
+    .form-control {
+        width: 100%;
+    }
+
+    .hide-mobile {
+        display: none !important;
+    }
+}
+
+@media (min-width: 577px) and (max-width: 991px) {
+    .filters .filter-op {
+        min-width: 100px;
+    }
+}
diff --git a/flask_admin/static/admin/js/bs4_filters.js b/flask_admin/static/admin/js/bs4_filters.js
index 248b7b65d..f974c266f 100644
--- a/flask_admin/static/admin/js/bs4_filters.js
+++ b/flask_admin/static/admin/js/bs4_filters.js
@@ -3,6 +3,14 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
     var $container = $('.filters', $root);
     var lastCount = 0;
 
+    function updateActionVisibility() {
+        if ($container.find('.filter-item').length === 0) {
+            $('button', $root).addClass('d-none');
+        } else {
+            $('button', $root).removeClass('d-none');
+        }
+    }
+
     function getCount(name) {
         var idx = name.indexOf('_');
 
@@ -20,40 +28,34 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
     }
 
     function removeFilter() {
-        $(this).closest('tr').remove();
-        if($('.filters tr').length == 0) {
-            $('button', $root).addClass('d-none');
-            $('.filters tbody').remove();
-        } else {
-            $('button', $root).removeClass('d-none');
-        }
-
+        $(this).closest('.filter-item').remove();
+        updateActionVisibility();
         return false;
     }
 
-    // triggered when the filter operation (equals, not equals, etc) is changed
-    function changeOperation(subfilters, $el, filter, $select) {
-        // get the filter_group subfilter based on the index of the selected option
-        var selectedFilter = subfilters[$select.select2('data').element[0].index];
-        var $inputContainer = $el.find('td').last();
+    function changeOperation(subfilters, $el, $select) {
+        var selectData = $select.select2('data');
+        var selectedIndex = selectData.length ? selectData[0].element[0].index : 0;
+        var selectedFilter = subfilters[selectedIndex];
+        var $inputContainer = $el.find('.filter-field').first();
 
-        // recreate and style the input field (turn into date range or select2 if necessary)
         var $field = createFilterInput($inputContainer, null, selectedFilter);
         styleFilterInput(selectedFilter, $field);
 
         $('button', $root).removeClass('d-none');
     }
 
-    // generate HTML for filter input - allows changing filter input type to one with options or tags
     function createFilterInput(inputContainer, filterValue, filter) {
+        inputContainer.empty();
+        var $field;
+
         if (filter.type == "select2-tags") {
-            var $field = $('<input type="hidden" class="filter-val form-control" />').attr('name', makeName(filter.arg));
+            $field = $('<input type="hidden" class="filter-val form-control" />').attr('name', makeName(filter.arg));
             $field.val(filterValue);
         } else if (filter.options) {
-            var $field = $('<select class="filter-val" />').attr('name', makeName(filter.arg));
+            $field = $('<select class="filter-val form-control" />').attr('name', makeName(filter.arg));
 
             $(filter.options).each(function() {
-                // for active filter inputs with options, add "selected" if there is a matching active filter
                 if (filterValue && (filterValue == this[0])) {
                     $field.append($('<option/>')
                         .val(this[0]).text(this[1]).attr('selected', true));
@@ -63,12 +65,12 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
                 }
             });
         } else {
-            var $field = $('<input type="text" class="filter-val form-control" />').attr('name', makeName(filter.arg));
+            $field = $('<input type="text" class="filter-val form-control" />').attr('name', makeName(filter.arg));
             $field.val(filterValue);
         }
-        inputContainer.replaceWith($('<td/>').append($field));
 
-        // show "Apply Filter" button when filter input is changed
+        inputContainer.append($field);
+
         $field.on('input change', function() {
             $('button', $root).removeClass('d-none');
         });
@@ -76,7 +78,6 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
         return $field;
     }
 
-    // add styling to input field, accommodates filters that change the input field's HTML
     function styleFilterInput(filter, field) {
         if (filter.type) {
             if ((filter.type == "datepicker") || (filter.type == "daterangepicker")) {
@@ -91,7 +92,6 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
                     filter.options.forEach(function(option) {
                         options.push({id:option[0], text:option[1]});
                     });
-                    // save tag options as json on data attribute
                     field.attr('data-tags', JSON.stringify(options));
                 }
             }
@@ -105,25 +105,20 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
     }
 
     function addFilter(name, subfilters, selectedIndex, filterValue) {
-        var $el = $('<tr class="form-horizontal" />').appendTo($container);
-
-        // Filter list
-        $el.append(
-            $('<td/>').append(
-                $('<a href="#" class="btn btn-secondary remove-filter" />')
-                    .append($('<span class="close-icon">&times;</span>'))
-                    .append('&nbsp;')
-                    .append(name)
-                    .click(removeFilter)
-                )
-        );
-
-        // Filter operation <select> (equal, not equal, etc)
-        var $select = $('<select class="filter-op" />');
-
-        // if one of the subfilters are selected, use that subfilter to create the input field
+        var $el = $('<div class="filter-item form-horizontal" />').appendTo($container);
+
+        var $labelWrapper = $('<div class="filter-label" />').appendTo($el);
+        var $labelLink = $('<a href="#" class="btn btn-secondary remove-filter" />')
+            .append($('<span class="close-icon">&times;</span>'))
+            .append('&nbsp;')
+            .append(name)
+        $labelWrapper.append($labelLink);
+
+        var $opContainer = $('<div class="filter-operation" />').appendTo($el);
+        var $select = $('<select class="filter-op form-control" />').appendTo($opContainer);
+
         var filterSelection = 0;
-        $.each(subfilters, function( subfilterIndex, subfilter ) {
+        $.each(subfilters, function(subfilterIndex, subfilter) {
             if (this.index == selectedIndex) {
                 $select.append($('<option/>').attr('value', subfilter.arg).attr('selected', true).text(subfilter.operation));
                 filterSelection = subfilterIndex;
@@ -132,53 +127,50 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
             }
         });
 
-        $el.append(
-            $('<td/>').append($select)
-        );
-
-        // select2 for filter-op (equal, not equal, etc)
-        $select.select2({width: 'resolve'}).on("change", function(e) {
-            changeOperation(subfilters, $el, filter, $select);
+        $select.select2({width: 'resolve'}).on("change", function() {
+            changeOperation(subfilters, $el, $select);
         });
 
-        // get filter option from filter_group, only for new filter creation
         var filter = subfilters[filterSelection];
-        var $inputContainer = $('<td/>').appendTo($el);
+        var $fieldContainer = $('<div class="filter-field" />').appendTo($el);
+        var $newFilterField = createFilterInput($fieldContainer, filterValue, filter).focus();
+        styleFilterInput(filter, $newFilterField);
 
-        var $newFilterField = createFilterInput($inputContainer, filterValue, filter).focus();
-        var $styledFilterField = styleFilterInput(filter, $newFilterField);
+        updateActionVisibility();
 
-        return $styledFilterField;
+        return $newFilterField;
     }
 
-    // Add Filter Button, new filter
     $('a.filter', filtersElement).click(function() {
         var name = ($(this).text().trim !== undefined ? $(this).text().trim() : $(this).text().replace(/^\s+|\s+$/g,''));
 
         addFilter(name, filterGroups[name], false, null);
 
         $('button', $root).removeClass('d-none');
+
+        return false;
     });
 
-    // on page load - add active filters
-    $.each(activeFilters, function( activeIndex, activeFilter ) {
+    $.each(activeFilters, function(activeIndex, activeFilter) {
         var idx = activeFilter[0],
             name = activeFilter[1],
             filterValue = activeFilter[2];
-        var $activeField = addFilter(name, filterGroups[name], idx, filterValue);
+        addFilter(name, filterGroups[name], idx, filterValue);
     });
 
-    // show "Apply Filter" button when filter input is changed
+    updateActionVisibility();
+
     $('.filter-val', $root).on('input change', function() {
         $('button', $root).removeClass('d-none');
     });
 
-    $('.remove-filter', $root).click(removeFilter);
+    $container.on('click', '.remove-filter', removeFilter);
 
     $('.filter-val', $root).not('.select2-container').each(function() {
         var count = getCount($(this).attr('name'));
-        if (count > lastCount)
+        if (count > lastCount) {
             lastCount = count;
+        }
     });
 
     lastCount += 1;
@@ -198,5 +190,4 @@ var AdminFilters = function(element, filtersElement, filterGroups, activeFilters
             );
         }
     });
-    $(document).trigger('adminFormReady');  // trigger event to allow dynamic filter form to function properly
 })(jQuery);
diff --git a/flask_admin/templates/bootstrap4/admin/lib.html b/flask_admin/templates/bootstrap4/admin/lib.html
index 19d9283c3..fec4697dc 100644
--- a/flask_admin/templates/bootstrap4/admin/lib.html
+++ b/flask_admin/templates/bootstrap4/admin/lib.html
@@ -22,11 +22,11 @@
     {% endif %}
 
     {% if min > 0 %}
-    <li class="page-item">
+    <li class="page-item d-none d-sm-block">
         <a class="page-link" href="{{ generator(0) }}">&laquo;</a>
     </li>
     {% else %}
-    <li class="page-item disabled">
+    <li class="page-item disabled d-none d-sm-block">
         <a class="page-link" href="javascript:void(0)">&laquo;</a>
     </li>
     {% endif %}
@@ -41,12 +41,16 @@
     {% endif %}
 
     {% for p in range(min, max) %}
+    {% set hide_on_mobile = '' %}
+    {% if p < page - 1 or p > page + 1 %}
+        {% set hide_on_mobile = ' d-none d-sm-block' %}
+    {% endif %}
     {% if page == p %}
-    <li class="page-item active">
+    <li class="page-item active{{ hide_on_mobile }}">
         <a class="page-link" href="javascript:void(0)">{{ p + 1 }}</a>
     </li>
     {% else %}
-    <li class="page-item">
+    <li class="page-item{{ hide_on_mobile }}">
         <a class="page-link" href="{{ generator(p) }}">{{ p + 1 }}</a>
     </li>
     {% endif %}
@@ -62,11 +66,11 @@
     </li>
     {% endif %}
     {% if max < pages %}
-    <li class="page-item">
+    <li class="page-item d-none d-sm-block">
         <a class="page-link" href="{{ generator(pages - 1) }}">&raquo;</a>
     </li>
     {% else %}
-    <li class="page-item disabled">
+    <li class="page-item disabled d-none d-sm-block">
         <a class="page-link" href="javascript:void(0)">&raquo;</a>
     </li>
     {% endif %}
@@ -119,55 +123,60 @@
   {% set direct_error = h.is_field_error(field.errors) %}
   {% set prepend = kwargs.pop('prepend', None) %}
   {% set append = kwargs.pop('append', None) %}
-  <div class="form-group {{ kwargs.get('column_class', '') }}">
-    <label for="{{ field.id }}" class="col-form-label {% if field.widget.input_type is defined and field.widget.input_type == 'checkbox' %}d-block mb-0{% endif %}">{{ field.label.text }}
+  {% set column_class = kwargs.pop('column_class', 'col-12 col-md-6') %}
+  <div class="form-group {{ column_class }} row form-row">
+    <label for="{{ field.id }}"
+           class="col-form-label col-12 col-md-3 {% if field.widget.input_type is defined and field.widget.input_type == 'checkbox' %}d-block mb-0{% endif %}">
+        {{ field.label.text }}
         {% if h.is_required_form_field(field) %}
           <strong class="text-danger">&#42;</strong>
         {%- else -%}
           &nbsp;
         {%- endif %}
     </label>
-    {% if prepend or append %}
-    <div class="input-group">
-      {%- if prepend -%}
-      <div class="input-group-prepend">
-        {{ prepend }}
-      </div>
-      {%- endif -%}
-    {% endif %}
-      {% if field.widget.input_type is defined and field.widget.input_type == 'checkbox' %}
-        {% set _class = kwargs.setdefault('class', '') %}
-      {% elif field.widget.input_type is defined and field.widget.input_type == 'file' %}
-        {% set _class = kwargs.setdefault('class', 'form-control-file') %}
-      {% else %}
-        {% set _class = kwargs.setdefault('class', 'form-control') %}
-      {% endif %}
-      {%- if direct_error %} {% set _ = kwargs.update({'class': kwargs['class'] ~ ' is-invalid'}) %} {% endif -%}
-      {{ field(**kwargs) | safe }}
-      {%- if append -%}
-      <div class="input-group-append">
-        {{ append }}
-      </div>
-      {%- endif -%}
-      {% if direct_error %}
-        <div class="invalid-feedback">
-          <ul class="form-text text-danger {% if field.widget.input_type == 'checkbox' %}mt-0{% endif %}">
-          {% for e in field.errors if e is string %}
-            <li>{{ e }}</li>
-          {% endfor %}
-          </ul>
+    <div class="col-12 col-md-9">
+        {% if prepend or append %}
+        <div class="input-group">
+          {%- if prepend -%}
+          <div class="input-group-prepend">
+            {{ prepend }}
+          </div>
+          {%- endif -%}
+        {% endif %}
+          {% if field.widget.input_type is defined and field.widget.input_type == 'checkbox' %}
+            {% set _class = kwargs.setdefault('class', '') %}
+          {% elif field.widget.input_type is defined and field.widget.input_type == 'file' %}
+            {% set _class = kwargs.setdefault('class', 'form-control-file') %}
+          {% else %}
+            {% set _class = kwargs.setdefault('class', 'form-control') %}
+          {% endif %}
+          {%- if direct_error %} {% set _ = kwargs.update({'class': kwargs['class'] ~ ' is-invalid'}) %} {% endif -%}
+          {{ field(**kwargs) | safe }}
+          {%- if append -%}
+          <div class="input-group-append">
+            {{ append }}
+          </div>
+          {%- endif -%}
+        {% if prepend or append %}
         </div>
-      {% elif field.description %}
-        <small class="form-text text-muted {% if field.widget.input_type == 'checkbox' %}mt-0{% endif %}">
-            {{ field.description|safe }}
-        </small>
-      {% endif %}
-    {% if prepend or append %}
+        {% endif %}
+        {% if direct_error %}
+          <div class="invalid-feedback">
+            <ul class="form-text text-danger {% if field.widget.input_type == 'checkbox' %}mt-0{% endif %}">
+            {% for e in field.errors if e is string %}
+              <li>{{ e }}</li>
+            {% endfor %}
+            </ul>
+          </div>
+        {% elif field.description %}
+          <small class="form-text text-muted {% if field.widget.input_type == 'checkbox' %}mt-0{% endif %}">
+              {{ field.description|safe }}
+          </small>
+        {% endif %}
+        {% if caller %}
+          {{ caller(form, field, direct_error, kwargs) }}
+        {% endif %}
     </div>
-    {% endif %}
-    {% if caller %}
-      {{ caller(form, field, direct_error, kwargs) }}
-    {% endif %}
   </div>
 {% endmacro %}
 
@@ -222,8 +231,8 @@ <h3>{{ text }}</h3>
         {% endif %}
   {% else %}
     <hr>
-    <div class="form-group">
-      <div class="col-md-offset-2 col-md-10 submit-row">
+    <div class="form-group row">
+      <div class="offset-md-2 col-12 col-md-10 submit-row">
         <input type="submit" class="btn btn-primary" value="{{ _gettext('Save') }}" />
         {% if extra %}
         {{ extra }}
diff --git a/flask_admin/templates/bootstrap4/admin/model/layout.html b/flask_admin/templates/bootstrap4/admin/model/layout.html
index 0a828ead5..a4532c2fe 100644
--- a/flask_admin/templates/bootstrap4/admin/model/layout.html
+++ b/flask_admin/templates/bootstrap4/admin/model/layout.html
@@ -52,13 +52,13 @@
             {% endif %}
         </div>
 
-        <table class="filters"></table>
+        <div class="filters filters-container"></div>
     </form>
     <div class="clearfix"></div>
 {% endmacro %}
 
 {% macro search_form(input_class="col-auto") %}
-    <form method="GET" action="{{ return_url }}" class="form-inline my-2 my-lg-0" role="search">
+    <form method="GET" action="{{ return_url }}" class="nav-search-form my-2 my-sm-0" role="search">
         {% for flt_name, flt_value in filter_args.items() %}
             <input type="hidden" name="{{ flt_name }}" value="{{ flt_value }}">
         {% endfor %}
@@ -74,10 +74,12 @@
         {% if sort_desc %}
             <input type="hidden" name="desc" value="1">
         {% endif %}
-        {% if search %}
-            <div class="form-inline input-group">
-              <input  class="form-control {{ input_class }}" size="30" type="text" name="search" value="{{ search }}"
+        <div class="search-controls d-flex align-items-stretch">
+            <div class="input-group flex-fill">
+              <input class="form-control {{ input_class }} flex-fill" size="30" type="text" name="search"
+                       value="{{ search or '' }}"
                        placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
+                {% if search %}
                 <div class="input-group-append">
                   <span class="input-group-text">
                     <a href="{{ clear_search_url }}" class="align-middle">
@@ -85,15 +87,10 @@
                     </a>
                   </span>
                 </div>
-                <button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
-            </div>
-        {% else %}
-            <div class="form-inline">
-              <input class="form-control {{ input_class }}" size="30" type="text" name="search" value=""
-                       placeholder="{{ _gettext('%(placeholder)s', placeholder=search_placeholder) }}">
-                <button class="btn btn-secondary my-2 my-sm-0 ml-2" type="submit">{{ _gettext('Search') }}</button>
+                {% endif %}
             </div>
-        {% endif %}
+            <button class="btn btn-secondary mt-2 mt-sm-0 ml-sm-2" type="submit">{{ _gettext('Search') }}</button>
+        </div>
     </form>
 {% endmacro %}
 
diff --git a/flask_admin/templates/bootstrap4/admin/model/list.html b/flask_admin/templates/bootstrap4/admin/model/list.html
index dcfb21907..90a6dcbf7 100644
--- a/flask_admin/templates/bootstrap4/admin/model/list.html
+++ b/flask_admin/templates/bootstrap4/admin/model/list.html
@@ -12,7 +12,7 @@
 
 {% block body %}
     {% block model_menu_bar %}
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs nav-list-controls">
         <li class="nav-item">
             <a href="javascript:void(0)" class="nav-link active">{{ _gettext('List') }}{% if count %} ({{ count }}){% endif %}</a>
         </li>
@@ -52,7 +52,7 @@
         {% endif %}
 
         {% if search_supported %}
-        <li class="nav-item ml-2">
+        <li class="nav-item nav-search">
             {{ model_layout.search_form() }}
         </li>
         {% endif %}
@@ -66,9 +66,9 @@
     {% endif %}
 
     {% block model_list_table %}
-    <div class="table-responsive">
-    <table class="table table-striped table-bordered table-hover model-list">
-        <thead>
+    <div class="table-responsive table-responsive-mobile">
+        <table class="table table-striped table-bordered table-hover model-list">
+            <thead>
             <tr>
                 {% block list_header scoped %}
                     {% if actions %}
@@ -78,12 +78,12 @@
                     {% endif %}
                     {% block list_row_actions_header %}
                         {% if admin_view.column_display_actions %}
-                        <th class="">&nbsp;</th>
+                        <th class="d-none d-md-table-cell">&nbsp;</th>
                         {% endif %}
                     {% endblock %}
                     {% for c, name in list_columns %}
                     {% set column = loop.index0 %}
-                    <th class="column-header col-{{c | replace('.', '-') }}">
+                    <th class="column-header col-{{c | replace('.', '-') }} d-none d-md-table-cell">
                         {% if admin_view.is_sortable(c) %}
                             {% if sort_column == column %}
                                 <a href="{{ sort_url(column, True) }}" title="{{ _gettext('Sort by %(name)s', name=name) }}">
@@ -110,29 +110,29 @@
                     {% endfor %}
                 {% endblock %}
             </tr>
-        </thead>
+            </thead>
         {% for row in data %}
         <tr>
             {% block list_row scoped %}
                 {% if actions %}
-                <td>
+                <td data-label="{{ _gettext('Select record') }}">
                     <input type="checkbox" name="rowid" class="action-checkbox" value="{{ get_pk_value(row) }}" title="{{ _gettext('Select record') }}" />
                 </td>
                 {% endif %}
                 {% block list_row_actions_column scoped %}
                     {% if admin_view.column_display_actions %}
-                    <td class="list-buttons-column">
+                    <td class="list-buttons-column" data-label="{{ _gettext('Actions') }}">
                         {% block list_row_actions scoped %}
-                          {% for action in list_row_actions %}
-                          {{ action.render_ctx(get_pk_value(row), row) }}
-                          {% endfor %}
+                            {% for action in list_row_actions %}
+                            {{ action.render_ctx(get_pk_value(row), row) }}
+                            {% endfor %}
                         {% endblock %}
                     </td>
                     {%- endif -%}
                 {% endblock %}
 
                 {% for c, name in list_columns %}
-                    <td class="col-{{c}}">
+                <td class="col-{{c}}" data-label="{{ name }}">
                     {% if admin_view.is_editable(c) %}
                         {% set form = list_forms[get_pk_value(row)] %}
                         {% if form.csrf_token is defined and form.csrf_token %}
@@ -145,7 +145,7 @@
                     {% else %}
                     {{ get_value(row, c) }}
                     {% endif %}
-                    </td>
+                </td>
                 {% endfor %}
             {% endblock %}
         </tr>
@@ -160,7 +160,7 @@
             </td>
         </tr>
         {% endfor %}
-    </table>
+        </table>
     </div>
     {% block list_pager %}
     {% if num_pages is not none %}