diff --git a/bukuserver/README.md b/bukuserver/README.md
index b3b8f849..c8dc92e5 100644
--- a/bukuserver/README.md
+++ b/bukuserver/README.md
@@ -118,7 +118,7 @@ The following are os env config variables available for bukuserver.
 | DISABLE_FAVICON | disable bookmark [favicons](https://wikipedia.org/wiki/Favicon) | boolean [default: `true`] ([here's why](#why-favicons-are-disabled-by-default))|
 | OPEN_IN_NEW_TAB | url link open in new tab | boolean [default: `false`] |
 | REVERSE_PROXY_PATH | reverse proxy path | string |
-| THEME | [GUI theme](https://bootswatch.com/3) | string [default: `default`] (`slate` is a good pick for dark mode) |
+| THEME | [GUI theme](https://bootswatch.com/4) | string [default: `default`] (`slate` is a good pick for dark mode) |
 | LOCALE | GUI language (partial support) | string [default: `en`] |
 
 Note: `BUKUSERVER_` is the common prefix (_every variable starts with it_).
diff --git a/bukuserver/server.py b/bukuserver/server.py
index 205c3273..cbbb62fa 100644
--- a/bukuserver/server.py
+++ b/bukuserver/server.py
@@ -120,7 +120,7 @@ def shell_context():
     app.jinja_env.filters['netloc'] = lambda x: urlparse(x).netloc  # pylint: disable=no-member
 
     admin = Admin(
-        app, name='buku server', template_mode='bootstrap3',
+        app, name='buku server', template_mode='bootstrap4',
         index_view=views.CustomAdminIndexView(
             template='bukuserver/home.html', url='/'
         )
diff --git a/bukuserver/static/bukuserver/css/list.css b/bukuserver/static/bukuserver/css/list.css
new file mode 100644
index 00000000..96ff9cb2
--- /dev/null
+++ b/bukuserver/static/bukuserver/css/list.css
@@ -0,0 +1,4 @@
+/* overriding icon-button text color with theme color */
+form.icon button {
+    color: inherit;
+}
diff --git a/bukuserver/static/bukuserver/css/modal.css b/bukuserver/static/bukuserver/css/modal.css
index 20de439b..764e50d9 100644
--- a/bukuserver/static/bukuserver/css/modal.css
+++ b/bukuserver/static/bukuserver/css/modal.css
@@ -5,7 +5,7 @@ body.modal-open {
 
 /* limit dialog height with a scrollbox */
 .modal-content {
-    max-height: calc(100vh - 60px);
+    max-height: calc(100vh - 3.5rem);
     display: flex;
     flex-direction: column;
 }
diff --git a/bukuserver/static/bukuserver/js/page_size.js b/bukuserver/static/bukuserver/js/page_size.js
index 23612d36..98ae3d81 100644
--- a/bukuserver/static/bukuserver/js/page_size.js
+++ b/bukuserver/static/bukuserver/js/page_size.js
@@ -1,20 +1,18 @@
 $(document).ready(function() {
   const SIZES = [20, 50, 100]; // hardcoded list; see page_size_form in admin/model/layout.html
   let pageSize = url => new URL(url || location.host).searchParams.get('page_size');
-  $(`.actions-nav .dropdown-menu`).each(function () {
-    let _sizes = $(`li a`, this).map(function () {return pageSize(this.href)}).get();
+  $(`.nav.nav-tabs .dropdown-menu`).each(function () {
+    let _sizes = $(`a.dropdown-item`, this).map(function () {return pageSize(this.href)}).get();
     if (SIZES.every((x, i) => x == _sizes[i]))
-      $(`li`, this).last().clone().each(function () {
-        $('a', this).text("custom").attr('href', `#`).on('click', () => {
-          let page = prompt(`Set custom page size (empty for default)`, pageSize(location) || '');
-          if (Number(page) || (page == "")) {
-            let search = new URL(location).searchParams;
-            (page ? search.set('page_size', page) : search.delete('page_size'));
-            location.search = search;
-          } else if (page != null)
-            alert(`Invalid page size: "${page}"`);
-          return false;
-        });
+      $('a', this).last().clone().text("custom").attr('href', `#`).on('click', () => {
+        let page = prompt(`Set custom page size (empty for default)`, pageSize(location) || '');
+        if (Number(page) || (page == "")) {
+          let search = new URL(location).searchParams;
+          (page ? search.set('page_size', page) : search.delete('page_size'));
+          location.search = search;
+        } else if (page != null)
+          alert(`Invalid page size: "${page}"`);
+        return false;
       }).appendTo(this);
   })
 });
diff --git a/bukuserver/templates/bukuserver/bookmark_create.html b/bukuserver/templates/bukuserver/bookmark_create.html
index 974da099..8906a686 100644
--- a/bukuserver/templates/bukuserver/bookmark_create.html
+++ b/bukuserver/templates/bukuserver/bookmark_create.html
@@ -6,6 +6,7 @@
   {{ buku.limit_navigation_if_popup() }}
   {{ buku.script('bookmark.js') }}
   {{ buku.fetch_checkbox() }}
+  {{ buku.horizontal_form(excluding_popups=True) }}
   {{ buku.focus() }}
   {{ buku.link_saved() }}
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/bookmark_create_modal.html b/bukuserver/templates/bukuserver/bookmark_create_modal.html
index 30c6e45f..645c3680 100644
--- a/bukuserver/templates/bukuserver/bookmark_create_modal.html
+++ b/bukuserver/templates/bukuserver/bookmark_create_modal.html
@@ -10,6 +10,7 @@
 {% block tail %}
   {{ super() }}
   {{ buku.script('bookmark.js') }}
-  {{ buku.fetch_checkbox() }}
+  {{ buku.fetch_checkbox(modal=True) }}
+  {{ buku.horizontal_form() }}
   {{ buku.focus('.modal-body') }}
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/bookmark_edit.html b/bukuserver/templates/bukuserver/bookmark_edit.html
index 82d5ff89..f8824f9e 100644
--- a/bukuserver/templates/bukuserver/bookmark_edit.html
+++ b/bukuserver/templates/bukuserver/bookmark_edit.html
@@ -7,7 +7,7 @@
 
 {% block edit_form %}
   {{ super() }}
-  <form method="POST" action="{{ get_url('.delete_view') }}" class="delete-form" style="display: inline-block;  float: right">
+  <form method="POST" action="{{ get_url('.delete_view') }}" class="delete-form d-inline-block float-right">
     <input type="hidden" name="id" value="{{ request.args.get('id') }}"/>
     <input type="hidden" name="url" value="{{ return_url }}"/>
     {% if csrf_token %}
@@ -23,7 +23,8 @@
   {{ super() }}
   {{ buku.limit_navigation_if_popup() }}
   {{ buku.script('bookmark.js') }}
+  <script>$('.submit-row').append($('.delete-form'))</script>
+  {{ buku.horizontal_form(excluding_popups=True) }}
   {{ buku.focus() }}
   {{ buku.link_saved() }}
-  <script>$('.submit-row').append($('.delete-form'))</script>
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/bookmark_edit_modal.html b/bukuserver/templates/bukuserver/bookmark_edit_modal.html
index 3ddf6484..ac491a62 100644
--- a/bukuserver/templates/bukuserver/bookmark_edit_modal.html
+++ b/bukuserver/templates/bukuserver/bookmark_edit_modal.html
@@ -4,5 +4,6 @@
 {% block tail %}
   {{ super() }}
   {{ buku.script('bookmark.js') }}
+  {{ buku.horizontal_form() }}
   {{ buku.focus('.modal-body') }}
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/home.html b/bukuserver/templates/bukuserver/home.html
index afe1c414..590ce8fa 100644
--- a/bukuserver/templates/bukuserver/home.html
+++ b/bukuserver/templates/bukuserver/home.html
@@ -9,18 +9,17 @@
 
 {% block menu_links %}
 {{ super() }}
-<form class="navbar-form navbar-right" action="{{ url_for('bookmark.index_view') }}" method="GET">
-  <div class="form-group">
+<form class="form-inline navbar-right" style="gap:.5ex" action="{{ url_for('bookmark.index_view') }}" method="GET">
+  <div class="d-inline-block align-middle">
     <input type="text" class="form-control" id="inputKeywords" placeholder="Search bookmark" name="flt1_buku_search">
   </div>
-  <button type="submit" class="btn btn-default">Search</button>
+  <button type="submit" class="btn btn-secondary">Search</button>
 </form>
 {% endblock %}
 
 {% block body %}
 {{ super() }}
-<main class="container text-center">
-  <div style="padding: 40px 15px">
+<main class="container text-center p-4">
     <h1>BUKU</h1>
     <p class="lead">Bookmark manager like a text-based mini-web</p>
     <p>
@@ -28,21 +27,21 @@ <h1>BUKU</h1>
       <a class="btn btn-lg btn-success" href="{{ url_for('tag.index_view') }}" role="button">Tags</a>
       <a class="btn btn-lg btn-success" href="{{ url_for('statistic.index') }}" role="button">Statistics</a>
     </p>
-    <div class="col-md-4 col-md-offset-4">
+    <div class="col-md-4 offset-md-4">
       <form action="{{ url_for('admin.search') }}" method="POST">
         <div class="form-group">
           {{ form.keyword.label }}
-          {{ form.keyword(class_='form-control', style='display: inline;  width: auto') }}
+          {{ form.keyword(class_='form-control d-inline', style='width: auto') }}
         </div>
-        <div class="text-left col-sm-offset-3">
-          <div class="checkbox"> {{form.deep()}} {{form.deep.label}} </div>
-          <div class="checkbox"> {{form.regex()}} {{form.regex.label}} </div>
+        <div class="text-left">
+          <div class="form-check"> {{form.deep()}} {{form.deep.label}} </div>
+          <div class="form-check"> {{form.regex()}} {{form.regex.label}} </div>
         </div>
-        <button type="submit" class="btn btn-default">Search</button>
+        <button type="submit" class="btn btn-secondary">Search</button>
       </form>
     </div>
-    <div class="col-md-4 col-md-offset-4">
-      <p style="padding-top: 2em"> Bookmarklet:
+    <div class="col-md-4 offset-md-4">
+      <p class="pt-4"> Bookmarklet:
         <a title="Drag this link to your bookmarks toolbar" href="{{ buku.bookmarklet() }}">
           <b>✚ Add to Buku</b>
         </a><br/>
@@ -50,7 +49,7 @@ <h1>BUKU</h1>
       </p>
     </div>
 
-    <details class="col-md-6 col-md-offset-3">
+    <details class="col-md-6 offset-md-3">
       <summary style="display: list-item;  cursor: pointer"> <em><strong>Location Bar (keyboard-only) shortcut</strong></em> </summary>
       <dl>
         <dt>in Firefox:</dt>
@@ -70,6 +69,5 @@ <h1>BUKU</h1>
         </dd>
       </dl>
     </details>
-  </div>
 </main>
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/lib.html b/bukuserver/templates/bukuserver/lib.html
index 4fe43eec..3ad9ab0a 100644
--- a/bukuserver/templates/bukuserver/lib.html
+++ b/bukuserver/templates/bukuserver/lib.html
@@ -17,8 +17,9 @@
 {% macro limit_navigation_if_popup() %}
   <style>
     .popup .navbar-brand {pointer-events: none}
-    .popup :is(#admin-navbar-collapse, .navbar-toggle) {display: none !important}
-    .popup .nav-tabs :is(:first-child, :nth-child(2):not(.active)) > * {display: none}
+    .popup #admin-navbar-collapse {display: block}
+    .popup :is(.navbar-nav, .navbar-toggler) {display: none}
+    .popup .nav-tabs :is(:first-child, :nth-child(2)) > .nav-link:not(.active) {display: none}
   </style>
   <script>opener && (opener !== window) && document.body.classList.add('popup')</script>
 {% endmacro %}
@@ -31,17 +32,37 @@
   {% endif %}
 {% endmacro %}
 
-{% macro fetch_checkbox(checked=True) %}
+{% macro fetch_checkbox(checked=True, modal=False) %}
   <script>
     $('.admin-form [name=fetch]').remove();
-    $('.admin-form').append(
-      $(`<div class="form-group"><label style="display: block"><span class="col-md-2 text-right">{{ _gettext('Fetch') }} &nbsp; </span>`
-        +`<span class="col-md-10"><input type="checkbox" name="fetch"{% if checked %} checked{% endif %}></span></label></div>`));
+    $('.admin-form fieldset{% if modal %} .modal-footer{% endif %}').{% if modal %}prepend{% else %}append{% endif %}(
+      $(`<div class="form-group {{ 'mb-0' if modal else '' }}"{% if modal %} style="flex-grow: 1"{% endif %}>`
+        +`<label class="control-label {{ 'mb-0' if modal else '' }}">{{ _gettext('Fetch') }} &nbsp; </label>`
+        +`<input type="checkbox" name="fetch"{% if checked %} checked{% endif %}></div>`));
+  </script>
+{% endmacro %}
+
+{% macro horizontal_form(excluding_popups=False) %}
+  <script>
+    $('.admin-form .form-group').each(function () {
+      if ($('.submit-row', this).length > 0{% if excluding_popups %} || document.body.matches('.popup'){% endif %}) {
+        $('.submit-row', this).addClass(document.body.matches('.popup') ? 'col-md-12' : 'offset-md-2');
+      } else if ($('input[type=checkbox], input[type=radio]', this).length > 0) {
+        $('label', this).addClass('form-row').css({cursor: 'pointer'}).html(`<span>${ $('label', this).html() }</span>`);
+        $('label span', this).addClass('col-md-2 col-form-label text-right d-inline-block');
+        $('input', this).appendTo($('label', this));
+      } else {
+        $(this).addClass('form-row');
+        $('input, textarea, select', this).addClass('col-md-10');
+        $('label', this).addClass('col-md-2 col-form-label text-right');
+      }
+    });
   </script>
 {% endmacro %}
 
 {% macro details_formatting(prefix='') %}
   <script>
+    $(`.modal-header h3`).wrapInner('<h5 class="modal-title">').children(0).unwrap();  // flask-admin #2505
     $(`body.popup {{prefix}} a`).attr('target', '_blank');
   </script>
 {% endmacro %}
diff --git a/bukuserver/templates/bukuserver/statistic.html b/bukuserver/templates/bukuserver/statistic.html
index 9bcc105b..fbebcd00 100644
--- a/bukuserver/templates/bukuserver/statistic.html
+++ b/bukuserver/templates/bukuserver/statistic.html
@@ -16,23 +16,23 @@
 {% endblock %}
 
 {% block body %}
-<div class="container">
-  <form class="form-inline" action="{{ url_for('statistic.index') }}" method="POST">
+<div class="container mb-4">
+  <form class="mb-4" action="{{ url_for('statistic.index') }}" method="POST">
     Data created
     <span id="created" rel="tooltip" title="{{ datetime }}" data-timestamp={{ datetime.timestamp() }}>{{ datetime_text }}</span>
-    <button type="submit" class="btn btn-default btn-sm">refresh</button>
+    <button type="submit" class="btn btn-secondary btn-sm">refresh</button>
   </form>
   <h3>Netloc</h3>
 
   {% if netlocs %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if netlocs.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#netlocModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#netlocModal">
         View all
       </button>
       {% endif %}
@@ -65,12 +65,12 @@ <h3>Netloc</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Netloc ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Netloc</th>
@@ -98,14 +98,14 @@ <h4 class="modal-title" id="myModalLabel">Netloc ranking</h4>
   <h3 class="col-md-12">Tag</h3>
 
   {% if tags %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonTagChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if tags.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#tagRankModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#tagRankModal">
         View all
       </button>
       {% endif %}
@@ -140,12 +140,12 @@ <h3 class="col-md-12">Tag</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Tag ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Tag</th>
@@ -171,14 +171,14 @@ <h4 class="modal-title" id="myModalLabel">Tag ranking</h4>
   <h3 class="col-md-12">Title (common)</h3>
 
   {% if titles %}
-  <div>
+  <div class="row">
     <div class="col-md-6">
       <canvas id="mostCommonTitleChart" width="500" height="500"></canvas>
     </div>
 
     <div class="col-md-6">
       {% if titles.cropped %}
-      <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#titleModal">
+      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#titleModal">
         View all
       </button>
       {% endif %}
@@ -213,12 +213,12 @@ <h3 class="col-md-12">Title (common)</h3>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Common titles ranking</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         </div>
         <div class="modal-body">
-          <table class="table table-condensed">
-            <thead class="bg-primary">
+          <table class="table table-sm">
+            <thead class="thead-dark">
               <tr>
                 <th>Rank</th>
                 <th>Title</th>
@@ -248,7 +248,7 @@ <h4 class="modal-title" id="myModalLabel">Common titles ranking</h4>
   {{ super() }}
   <script>// sticky table headers in modals
     $('.modal-body').each(function () {
-      $('thead', this).css({top: '-' + $.css(this, 'padding-top')});
+      $('thead', this).css({top: `calc(-${$.css(this, 'padding-top')} - 1px)`});  // +border
     });
   </script>
   {{ buku.script('Chart.js') }}
diff --git a/bukuserver/templates/bukuserver/tag_edit.html b/bukuserver/templates/bukuserver/tag_edit.html
index 3af48c9c..93e2ec49 100644
--- a/bukuserver/templates/bukuserver/tag_edit.html
+++ b/bukuserver/templates/bukuserver/tag_edit.html
@@ -3,5 +3,6 @@
 
 {% block tail %}
   {{ super() }}
+  {{ buku.horizontal_form() }}
   {{ buku.focus() }}
 {% endblock %}
diff --git a/bukuserver/templates/bukuserver/tags_list.html b/bukuserver/templates/bukuserver/tags_list.html
index 84459020..33cb9e4f 100644
--- a/bukuserver/templates/bukuserver/tags_list.html
+++ b/bukuserver/templates/bukuserver/tags_list.html
@@ -8,8 +8,10 @@
 
 {% block model_menu_bar_before_filters %}
   {{ super() }}
-  <form id="refresh" class="hidden" method="POST" action="refresh"></form>
-  <li><a href="#" onclick="refresh.submit()">{{ _gettext('Refresh') }}</a></li>
+  <form id="refresh" class="d-none" method="POST" action="refresh"></form>
+  <li class="nav-item">
+    <a class="nav-link" href="#" onclick="refresh.submit()">{{ _gettext('Refresh') }}</a>
+  </li>
 {% endblock %}
 
 {% block tail %}
diff --git a/bukuserver/views.py b/bukuserver/views.py
index b0b31cac..190ad303 100644
--- a/bukuserver/views.py
+++ b/bukuserver/views.py
@@ -135,7 +135,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup:
         if netloc and self.url_render_mode != 'netloc' and url_for_index_view_netloc:
             tag_links += [link(f'netloc:{netloc}', url_for_index_view_netloc, badge='success')]
         for tag in filter(None, model.tags.split(',')):
-            tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='default')]
+            tag_links += [link(tag, get_index_view_url(flt0_tags_contain=tag.strip()), badge='secondary')]
         res += [f'<div class="tag-list">{"".join(tag_links)}</div>']
         description = model.description and f'<div class="description">{escape(model.description)}</div>'
         if description:
@@ -146,7 +146,7 @@ def _list_entry(self, context: Any, model: Namespace, name: str) -> Markup:
     def get_detail_value(self, context, model, name):
         value = super().get_detail_value(context, model, name)
         if name == 'tags':
-            tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='default')
+            tags = (link(s.strip(), url_for('bookmark.index_view', flt0_tags_contain=s.strip()), badge='secondary')
                     for s in (value or '').split(',') if s.strip())
             return Markup(f'<div class="tag-list">{"".join(tags)}</div>')
         if name == 'url':
@@ -179,7 +179,7 @@ def get_detail_value(self, context, model, name):
     edit_modal_template = "bukuserver/bookmark_edit_modal.html"
     edit_template = "bukuserver/bookmark_edit.html"
     named_filter_urls = True
-    extra_css = ['/static/bukuserver/css/' + it for it in ('bookmark.css', 'modal.css')]
+    extra_css = ['/static/bukuserver/css/' + it for it in ('bookmark.css', 'modal.css', 'list.css')]
     extra_js = ['/static/bukuserver/js/' + it for it in ('page_size.js', 'last_page.js')]
     last_page = expose('/last-page')(last_page)
 
@@ -432,6 +432,7 @@ def _name_formatter(self, _, model, name):
     }
     list_template = 'bukuserver/tags_list.html'
     edit_template = "bukuserver/tag_edit.html"
+    extra_css = ['/static/bukuserver/css/list.css']
     extra_js = ['/static/bukuserver/js/' + it for it in ('page_size.js', 'last_page.js')]
     last_page = expose('/last-page')(last_page)
 
@@ -628,7 +629,7 @@ def format_value(field, bookmark, spacing=''):
 
 def link(text, url, new_tab=False, html=False, badge=''):
     target = ('' if not new_tab else ' target="_blank"')
-    cls = ('' if not badge else f' class="btn label label-{badge}"')
+    cls = ('' if not badge else f' class="btn badge badge-{badge}"')
     return f'<a{cls} href="{escape(url)}"{target}>{text if html else escape(text)}</a>'
 
 def sorted_counter(keys, *, min_count=0):
diff --git a/tests/test_views.py b/tests/test_views.py
index 9e843656..9c353264 100644
--- a/tests/test_views.py
+++ b/tests/test_views.py
@@ -149,7 +149,7 @@ def test_bookmarklet_view(bukudb, client, exists, uri, tab, args):
 
     response = client.get('/bookmarklet', query_string=query, follow_redirects=True)
     dom = assert_response(response, uri, argnames=args)
-    assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}/li{xpath_cls("active")}/a/text()') == [tab]
+    assert dom.xpath(f'//ul{xpath_cls("nav nav-tabs")}//a{xpath_cls("nav-link active")}/text()') == [tab]
     assert dom.xpath('//input[@name="link"]/@value') == [query['url']]
     assert bool(dom.xpath('//input[@name="id"]')) == exists
 
@@ -308,9 +308,9 @@ def test_env_entry_render_params(bukudb, app, client, mode, favicons, new_tab):
     target = '' if not new_tab else ' target="_blank"'
     icon = '' if not favicons else f'<img class="favicon" src="http://www.google.com/s2/favicons?domain={netloc}"/> '
     prefix = f'<td class="col-Entry"> {icon}<span class="title"><a href="{url}"{target}>{title}</a></span>'
-    tags = [f'<a class="btn label label-default" href="/bookmark/?flt0_tags_contain={s}">{s}</a>' for s in _tags]
+    tags = [f'<a class="btn badge badge-secondary" href="/bookmark/?flt0_tags_contain={s}">{s}</a>' for s in _tags]
     netloc_tag = ('' if mode == 'netloc' else
-                  f'<a class="btn label label-success" href="/bookmark/?flt0_url_netloc_match={netloc}">netloc:{netloc}</a>')
+                  f'<a class="btn badge badge-success" href="/bookmark/?flt0_url_netloc_match={netloc}">netloc:{netloc}</a>')
     suffix = f'<div class="tag-list">{netloc_tag}{"".join(tags)}</div><div class="description">{desc}</div> </td>'
     if mode == 'netloc':
         assert cell == f'{prefix}<span class="netloc"> (<a href="/bookmark/?flt0_url_netloc_match={netloc}">{netloc}</a>)</span>{suffix}'
@@ -367,7 +367,7 @@ def test_env_reverse_proxy_path(proxy_path, client):
 def test_env_theme(theme, client):
     dom = assert_response(client.get('/'), '/')
     assert dom.xpath('//head/link[@rel="stylesheet"][starts-with(@href, $href)]',
-                     href=f'/static/admin/bootstrap/bootstrap3/swatch/{theme or "default"}/bootstrap.min.css?')
+                     href=f'/static/admin/bootstrap/bootstrap4/swatch/{theme or "default"}/bootstrap.min.css?')
 
 
 _DICT = {