From 49563e8f9fd52266188287fe42dfa7bf987b1137 Mon Sep 17 00:00:00 2001
From: Avris <andre@avris.it>
Date: Fri, 22 Jan 2021 23:54:24 +0100
Subject: [PATCH] #169 Bootstrap 5 [wip]

---
 assets/style.scss                  | 31 ++++++++++-----
 assets/variables.scss              |  4 ++
 components/Account.vue             | 32 +++++++---------
 components/Authors.vue             |  2 +-
 components/ButtonList.vue          | 24 ++++++------
 components/Dictionary.vue          | 26 +++++--------
 components/Header.vue              |  8 ++--
 components/InclusiveDictionary.vue | 30 ++++++---------
 components/InclusiveSubmitForm.vue |  6 +--
 components/Link.vue                |  2 +-
 components/LinkInput.vue           | 14 +++----
 components/ListInput.vue           | 18 ++++-----
 components/Login.vue               | 22 +++++------
 components/NameCount.vue           |  2 +-
 components/NormativeBadge.vue      |  2 +-
 components/NounForm.vue            | 10 ++---
 components/NounSubmitForm.vue      |  6 +--
 components/OpinionListInput.vue    | 60 ++++++++++++++----------------
 components/ProfileOverview.vue     |  8 ++--
 components/Roles.vue               |  2 +-
 components/Separator.vue           |  2 +-
 components/SocialConnection.vue    |  6 +--
 components/Source.vue              | 16 ++++----
 components/SourceSubmitForm.vue    | 14 +++----
 components/TermsDictionary.vue     | 30 ++++++---------
 components/TermsSubmitForm.vue     |  4 +-
 layouts/default.vue                |  2 +-
 locale/pl/nouns/NounsNav.vue       |  4 +-
 nuxt.config.js                     |  3 ++
 package.json                       |  2 +-
 routes/admin.vue                   | 22 +++++------
 routes/api.vue                     |  4 +-
 routes/census.vue                  |  4 +-
 routes/homepage.vue                | 12 +++---
 routes/names.vue                   | 16 +++-----
 routes/profile.vue                 |  6 +--
 routes/profileEditor.vue           |  2 +-
 routes/sources.vue                 | 22 +++++------
 routes/team.vue                    |  6 +--
 yarn.lock                          |  8 ++--
 40 files changed, 229 insertions(+), 265 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index eb22fe99..785991d1 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -6,7 +6,7 @@
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
 //@import "~bootstrap/scss/images";
-//@import "~bootstrap/scss/code";
+//@import "~bootstrap/scss/containers";
 //@import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/tables";
 @import "~bootstrap/scss/forms";
@@ -14,18 +14,17 @@
 //@import "~bootstrap/scss/transitions";
 @import "~bootstrap/scss/dropdown";
 @import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
+//TODO @import "~bootstrap/scss/input-group";
+//TODO @import "~bootstrap/scss/custom-forms";
 //@import "~bootstrap/scss/nav";
 //@import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
+//@import "~bootstrap/scss/accordion";
 //@import "~bootstrap/scss/breadcrumb";
 @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
-//@import "~bootstrap/scss/jumbotron";
 @import "~bootstrap/scss/alert";
 @import "~bootstrap/scss/progress";
-//@import "~bootstrap/scss/media";
 @import "~bootstrap/scss/list-group";
 //@import "~bootstrap/scss/close";
 //@import "~bootstrap/scss/toasts";
@@ -34,8 +33,9 @@
 //@import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";
 //@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
+
+@import "~bootstrap/scss/helpers";
+@import "~bootstrap/scss/utilities/api";
 
 $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts";
 @import "~@fortawesome/fontawesome-pro/scss/fontawesome";
@@ -91,7 +91,13 @@ img.icon {
         $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
         @each $prop, $abbrev in (width: w, height: h) {
-            @each $size, $length in $sizes {
+            @each $size, $length in (
+                    25: 25%,
+                    50: 50%,
+                    75: 75%,
+                    100: 100%,
+                    auto: auto
+            ) {
                 .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
             }
         }
@@ -115,6 +121,11 @@ blockquote {
     font-size: 1.1em;
 }
 
-[dir="rtl"] {
-    text-align: right;
+.form-group {
+    margin-bottom: $spacer;
+}
+
+/* RTL fix */
+.list-group, .list-unstyled {
+    padding-right: 0;
 }
diff --git a/assets/variables.scss b/assets/variables.scss
index cd2650d2..3dc64215 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -4,8 +4,12 @@ $headings-font-family: Quicksand, -apple-system, BlinkMacSystemFont, "Segoe UI",
 $primary: #C71585;
 $alert-border-level: -3;
 
+$link-decoration: none;
+$link-hover-decoration: underline;
+
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
 
 @import '~@fortawesome/fontawesome-pro/scss/variables';
diff --git a/components/Account.vue b/components/Account.vue
index 4c99e92b..63e61be7 100644
--- a/components/Account.vue
+++ b/components/Account.vue
@@ -29,7 +29,7 @@
                         <ImageUploader small @uploaded="uploaded"/>
                     </div>
                     <p v-if="$isGranted('panel') || $isGranted('users')">
-                        <nuxt-link to="/admin" class="badge badge-primary"><T>user.account.admin</T></nuxt-link>
+                        <nuxt-link to="/admin" class="badge bg-primary"><T>user.account.admin</T></nuxt-link>
                     </p>
                 </div>
                 <div class="mx-2 flex-grow-1">
@@ -47,11 +47,9 @@
                         <div class="input-group mb-3">
                             <input type="text" class="form-control" v-model="username"
                                    required minlength="4" maxlength="16"/>
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-primary">
-                                    <T>user.account.changeUsername.action</T>
-                                </button>
-                            </div>
+                            <button class="btn btn-outline-primary">
+                                <T>user.account.changeUsername.action</T>
+                            </button>
                         </div>
                     </form>
 
@@ -59,11 +57,9 @@
                         <h3 class="h6"><T>user.account.changeEmail.header</T></h3>
                         <div v-if="!changeEmailAuthId" class="input-group mb-3">
                             <input type="email" class="form-control" v-model="email" required/>
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-primary">
-                                    <T>user.account.changeEmail.action</T>
-                                </button>
-                            </div>
+                            <button class="btn btn-outline-primary">
+                                <T>user.account.changeEmail.action</T>
+                            </button>
                         </div>
                         <div v-else class="input-group mb-3">
                             <input type="text" class="form-control text-center" v-model="code"
@@ -71,12 +67,10 @@
                                    inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"
                                    ref="code"
                             />
-                            <div class="input-group-append">
-                                <button class="btn btn-outline-primary">
-                                    <Icon v="key"/>
-                                    <T>user.code.action</T>
-                                </button>
-                            </div>
+                            <button class="btn btn-outline-primary">
+                                <Icon v="key"/>
+                                <T>user.code.action</T>
+                            </button>
                         </div>
                     </form>
                 </div>
@@ -107,12 +101,12 @@
         </Loading>
 
         <section>
-            <a href="#" class="badge badge-light border" @click.prevent="logout">
+            <a href="#" class="badge bg-light text-dark border" @click.prevent="logout">
                 <Icon v="sign-out"/>
                 <T>user.logout</T>
             </a>
 
-            <a href="#" class="badge badge-light border" @click.prevent="deleteAccount">
+            <a href="#" class="badge bg-light text-dark border" @click.prevent="deleteAccount">
                 <Icon v="trash-alt"/>
                 <T>user.deleteAccount</T>
             </a>
diff --git a/components/Authors.vue b/components/Authors.vue
index 4c3ac076..7c9c364f 100644
--- a/components/Authors.vue
+++ b/components/Authors.vue
@@ -13,7 +13,7 @@
             <li v-for="author in authors" class="mb-2">
                 <Icon v="user"/>
                 {{ author.footerName }}
-                <nuxt-link :to="`/@${author.username}`" class="badge badge-light border">
+                <nuxt-link :to="`/@${author.username}`" class="badge bg-light text-dark border">
                     @{{author.username}}
                 </nuxt-link>
                 <br/>
diff --git a/components/ButtonList.vue b/components/ButtonList.vue
index a14a0da0..d0e1085c 100644
--- a/components/ButtonList.vue
+++ b/components/ButtonList.vue
@@ -3,7 +3,7 @@
         <draggable tag="ul" v-model="iVal" ghostClass="ghost" @end="$emit('input', iVal)" :group="ulid"
                    class="list-inline border rounded drop-empty px-3 py-2">
             <li v-for="val in iVal" v-if="options[val]" class="list-inline-item py-1">
-                <a href="#" class="badge badge-light border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
+                <a href="#" class="badge bg-light text-dark border p-2" @click.prevent="$emit('input', iVal.filter(v => v !== val))">
                     <slot v-bind:v="val" v-bind:desc="options[val]">
                         {{ val }}
                     </slot>
@@ -15,23 +15,21 @@
         </draggable>
         <div class="input-group py-1">
             <input v-model="search" class="form-control form-control-sm" :placeholder="$t('crud.search')"/>
-            <div class="input-group-append">
-                <button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
-                    <Icon v="times"/>
-                </button>
+            <button v-if="search" type="button" class="btn btn-light btn-sm border text-danger" @click.prevent="search = ''">
+                <Icon v="times"/>
+            </button>
 
-                <button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
-                    <Icon v="caret-up"/>
-                </button>
-                <button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
-                    <Icon v="caret-down"/>
-                </button>
-            </div>
+            <button v-if="all" type="button" class="btn btn-light btn-sm border" @click.prevent="all = false">
+                <Icon v="caret-up"/>
+            </button>
+            <button v-else type="button" class="btn btn-light btn-sm border" @click.prevent="all = true">
+                <Icon v="caret-down"/>
+            </button>
         </div>
 
         <draggable tag="ul" v-model="remainingOptions" ghostClass="ghost" @end="$emit('input', iVal)" class="list-inline" :group="ulid">
             <li v-for="val in remainingOptions" v-if="(all && !search) || (search && options[val].toLowerCase().includes(search))" class="list-inline-item py-1">
-                <a href="#" class="badge badge-light p-2" @click.prevent="$emit('input', [...iVal, val])">
+                <a href="#" class="badge bg-light text-dark p-2" @click.prevent="$emit('input', [...iVal, val])">
                     <slot v-bind:v="val" v-bind:desc="options[val]">
                         {{ val }}
                     </slot>
diff --git a/components/Dictionary.vue b/components/Dictionary.vue
index e885c992..9d06fc36 100644
--- a/components/Dictionary.vue
+++ b/components/Dictionary.vue
@@ -9,23 +9,17 @@
 
         <section class="sticky-top">
             <div class="input-group mb-3 bg-white">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">
-                        <Icon v="filter"/>
-                    </span>
-                </div>
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
                 <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
-                <div class="input-group-append" v-if="filter">
-                    <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
-                        <Icon v="times"/>
-                    </button>
-                </div>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
-                        <Icon v="plus-circle"/>
-                        <T>nouns.submit.action</T>
-                    </button>
-                </div>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
+                <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
+                    <Icon v="plus-circle"/>
+                    <T>nouns.submit.action</T>
+                </button>
             </div>
         </section>
 
diff --git a/components/Header.vue b/components/Header.vue
index 8517f2a4..b039d37b 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -53,7 +53,7 @@
             </div>
         </div>
         <div class="d-block d-md-none">
-            <div class="btn-group-vertical btn-block nav-custom mb-2">
+            <div class="btn-group-vertical d-flex nav-custom mb-2">
                 <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                     <Icon :v="link.icon"/>
                     {{ link.textLong || link.text }}
@@ -67,7 +67,7 @@
                 <Icon v="bars"/>
             </button>
             <div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']">
-                <div class="btn-group-vertical btn-block nav-custom nav-custom-left mb-2">
+                <div class="btn-group-vertical d-flex nav-custom nav-custom-left mb-2">
                     <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                         <Icon :v="link.icon"/>
                         {{ link.textLong || link.text }}
@@ -76,7 +76,7 @@
             </div>
         </div>
         <div class="d-none d-md-block">
-            <div class="btn-group btn-block nav-custom mb-2">
+            <div class="btn-group d-flex nav-custom mb-2">
                 <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                     <Icon :v="link.icon" size="1.6"/>
                     <br/>
@@ -270,7 +270,7 @@
 <style lang="scss" scoped>
     @import "assets/variables";
 
-    @include media-breakpoint-down('sm', $grid-breakpoints) {
+    @include media-breakpoint-down('md', $grid-breakpoints) {
         h1 {
             font-size: 2rem;
         }
diff --git a/components/InclusiveDictionary.vue b/components/InclusiveDictionary.vue
index 8063f1ef..c4de9f5f 100644
--- a/components/InclusiveDictionary.vue
+++ b/components/InclusiveDictionary.vue
@@ -9,23 +9,17 @@
 
         <section class="sticky-top">
             <div class="input-group mb-3 bg-white">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">
-                        <Icon v="filter"/>
-                    </span>
-                </div>
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
                 <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
-                <div class="input-group-append" v-if="filter">
-                    <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
-                        <Icon v="times"/>
-                    </button>
-                </div>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
-                        <Icon v="plus-circle"/>
-                        <T>nouns.submit.action</T>
-                    </button>
-                </div>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
+                <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
+                    <Icon v="plus-circle"/>
+                    <T>nouns.submit.action</T>
+                </button>
             </div>
         </section>
 
@@ -54,7 +48,7 @@
 
                     <ul class="list-inline">
                         <li v-for="category in s.el.categories" class="list-inline-item">
-                            <span class="badge badge-primary">
+                            <span class="badge bg-primary">
                                 {{category}}
                             </span>
                         </li>
@@ -68,7 +62,7 @@
 
                         <ul class="list-inline">
                             <li v-for="category in entries[s.el.base].categories" class="list-inline-item">
-                            <span class="badge badge-primary">
+                            <span class="badge bg-primary">
                                 {{category}}
                             </span>
                             </li>
diff --git a/components/InclusiveSubmitForm.vue b/components/InclusiveSubmitForm.vue
index 986e8638..7d8c0885 100644
--- a/components/InclusiveSubmitForm.vue
+++ b/components/InclusiveSubmitForm.vue
@@ -49,7 +49,7 @@
             <div class="form-group">
                 <label><strong><T>nouns.inclusive.categories</T>:</strong></label>
                 <a v-for="category in config.nouns.inclusive.categories"
-                   href="#" :class="['badge border mx-2', form.categories.includes(category) ? 'badge-primary' : 'badge-light']"
+                   href="#" :class="['badge border mx-2', form.categories.includes(category) ? 'bg-primary' : 'bg-light']"
                    @click.prevent="form.categories = form.categories.includes(category) ? form.categories.filter(c => c !== category) : [...form.categories, category]"
                 >
                     {{ category }}
@@ -66,12 +66,12 @@
             <div class="alert alert-info" v-if="form.base">
                 <Icon v="info-circle"/>
                 <T>nouns.editing</T>
-                <button class="btn btn-sm float-right" @click="form.base = null">
+                <button class="btn btn-sm float-end" @click="form.base = null">
                     <Icon v="times"/>
                 </button>
             </div>
 
-            <button class="btn btn-primary btn-block" :disabled="submitting">
+            <button class="btn btn-primary w-100" :disabled="submitting">
                 <template v-if="submitting">
                     <Icon v="circle-notch fa-spin"/>
                 </template>
diff --git a/components/Link.vue b/components/Link.vue
index 34caa805..e523fc97 100644
--- a/components/Link.vue
+++ b/components/Link.vue
@@ -1,7 +1,7 @@
 <template>
     <li class="my-2">
         <Icon :v="link.icon" :set="link.iconSet || 'l'"/>
-        <span v-for="lang in link.lang || []" class="badge badge-light border">{{lang}}</span>
+        <span v-for="lang in link.lang || []" class="badge bg-light text-dark border">{{lang}}</span>
         <a :href="link.url" target="_blank" rel="noopener">
             <LinkedText :text="link.headline"/>
         </a>
diff --git a/components/LinkInput.vue b/components/LinkInput.vue
index e14c5e60..e137fbcf 100644
--- a/components/LinkInput.vue
+++ b/components/LinkInput.vue
@@ -1,14 +1,12 @@
 <template>
     <div class="input-group my-2">
         <input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
-        <div class="input-group-append">
-            <button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
-                <Icon v="clipboard"/>
-            </button>
-            <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
-                <Icon v="external-link"/>
-            </a>
-        </div>
+        <button class="btn btn-outline-secondary btn-clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink">
+            <Icon v="clipboard"/>
+        </button>
+        <a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
+            <Icon v="external-link"/>
+        </a>
     </div>
 </template>
 
diff --git a/components/ListInput.vue b/components/ListInput.vue
index 2c94626d..63c65fdc 100644
--- a/components/ListInput.vue
+++ b/components/ListInput.vue
@@ -2,24 +2,20 @@
     <draggable tag="ul" v-model="iVal" handle=".handle" ghostClass="ghost" @end="$emit('input', iVal)" class="list-unstyled" :group="group">
         <li v-for="(v, i) in iVal" ref="items">
             <div class="input-group input-group-sm mb-1">
-                <div class="input-group-prepend">
-                    <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
-                        <Icon v="bars"/>
-                    </button>
-                </div>
+                <button class="btn btn-light border handle" type="button" :aria-label="$t('table.sort')">
+                    <Icon v="bars"/>
+                </button>
                 <slot v-bind:val="iVal[i]" v-bind:update="curry(update)(i)">
                     <input v-model="iVal[i]" type="text" class="form-control" required/>
                 </slot>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
-                        <Icon v="times"/>
-                    </button>
-                </div>
+                <button class="btn btn-outline-danger" type="button" @click.prevent="remove(i)" :aria-label="$t('crud.remove')">
+                    <Icon v="times"/>
+                </button>
             </div>
         </li>
 
         <li slot="footer">
-            <button class="btn btn-outline-success btn-block btn-sm" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
+            <button class="btn btn-outline-success w-100 btn-sm" type="button" @click.prevent="add" :aria-label="$t('crud.add')">
                 <Icon v="plus"/>
             </button>
         </li>
diff --git a/components/Login.vue b/components/Login.vue
index 91d1da12..6d813eec 100644
--- a/components/Login.vue
+++ b/components/Login.vue
@@ -11,14 +11,12 @@
                 <div class="input-group mb-3">
                     <input type="text" class="form-control" v-model="usernameOrEmail"
                            :placeholder="$t('user.login.placeholder')" autofocus required/>
-                    <div class="input-group-append">
-                        <button class="btn btn-primary">
-                            <Icon v="sign-in"/>
-                            <T>user.login.action</T>
-                        </button>
-                    </div>
+                    <button class="btn btn-primary">
+                        <Icon v="sign-in"/>
+                        <T>user.login.action</T>
+                    </button>
                 </div>
-                <div class="btn-group btn-block mb-3">
+                <div class="btn-group w-100 mb-3">
                     <a :href="`/api/connect/${provider}`" v-for="(providerOptions, provider) in socialProviders" class="btn btn-outline-primary">
                         <Icon :v="providerOptions.icon || provider" set="b"/>
                         {{ providerOptions.name }}
@@ -49,12 +47,10 @@
                            inputmode="numeric" pattern="[0-9]{6}" autocomplete="one-time-code"
                            ref="code"
                     />
-                    <div class="input-group-append">
-                        <button class="btn btn-primary">
-                            <Icon v="key"/>
-                            <T>user.code.action</T>
-                        </button>
-                    </div>
+                    <button class="btn btn-primary">
+                        <Icon v="key"/>
+                        <T>user.code.action</T>
+                    </button>
                 </div>
             </form>
         </div>
diff --git a/components/NameCount.vue b/components/NameCount.vue
index 14be5d9b..8db1bb20 100644
--- a/components/NameCount.vue
+++ b/components/NameCount.vue
@@ -6,7 +6,7 @@
                     {{version}}
                     <small v-if="ordinalDesc">({{ ordinalDesc }})</small>:
                 </strong>
-                <span v-for="(icon, key) in config.names.countSex" :key="key" class="badge badge-light badge-big border mx-1">
+                <span v-for="(icon, key) in config.names.countSex" :key="key" class="badge bg-light text-dark badge-big border mx-1">
                     <Icon :v="icon"/>
                     {{ count(version, key, ordinal) }}
                 </span>
diff --git a/components/NormativeBadge.vue b/components/NormativeBadge.vue
index 77e0662d..e94f48a3 100644
--- a/components/NormativeBadge.vue
+++ b/components/NormativeBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="badge badge-secondary toggle-hover">
+    <span class="badge bg-secondary toggle-hover">
         <Icon v="book-open"/>
         <span class="togglable"><T>pronouns.normative</T></span>
     </span>
diff --git a/components/NounForm.vue b/components/NounForm.vue
index 7bbba009..29bec2b7 100644
--- a/components/NounForm.vue
+++ b/components/NounForm.vue
@@ -2,14 +2,12 @@
     <div>
         <div v-for="(synonym, i) in val" :key="i" class="input-group input-group-sm p-1">
             <input type="text" class="form-control" v-model="val[i]" required ref="inp" :maxlength="maxlength">
-            <div v-if="i || !required" class="input-group-append">
-                <button type="button" class="btn btn-outline-danger btn-sm" @click="remove(i)">
-                    <Icon v="times"/>
-                </button>
-            </div>
+            <button v-if="i || !required" type="button" class="btn btn-outline-danger btn-sm" @click="remove(i)">
+                <Icon v="times"/>
+            </button>
         </div>
         <div class="p-1">
-            <button type="button" class="btn btn-outline-success btn-sm btn-block" @click="add">
+            <button type="button" class="btn btn-outline-success btn-sm w-100" @click="add">
                 <Icon v="plus"/>
             </button>
         </div>
diff --git a/components/NounSubmitForm.vue b/components/NounSubmitForm.vue
index 8824323f..2d3daea4 100644
--- a/components/NounSubmitForm.vue
+++ b/components/NounSubmitForm.vue
@@ -75,13 +75,13 @@
             <div class="alert alert-info" v-if="form.base">
                 <Icon v="info-circle"/>
                 <T>nouns.editing</T>
-                <button class="btn btn-sm float-right" @click="form.base = null">
+                <button class="btn btn-sm float-end" @click="form.base = null">
                     <Icon v="times"/>
                 </button>
             </div>
 
             <template v-if="config.nouns.templates">
-                <a v-if="!templateVisible" href="#" @click.prevent="templateVisible = true" class="btn btn-outline-primary btn-block">
+                <a v-if="!templateVisible" href="#" @click.prevent="templateVisible = true" class="btn btn-outline-primary w-100">
                     <Icon v="copy"/>
                     <T>nouns.template</T>
                 </a>
@@ -105,7 +105,7 @@
                 </div>
             </template>
 
-            <button class="btn btn-primary btn-block" :disabled="submitting">
+            <button class="btn btn-primary w-100" :disabled="submitting">
                 <template v-if="submitting">
                     <Icon v="circle-notch fa-spin"/>
                 </template>
diff --git a/components/OpinionListInput.vue b/components/OpinionListInput.vue
index ffe3d9ec..09065e18 100644
--- a/components/OpinionListInput.vue
+++ b/components/OpinionListInput.vue
@@ -1,38 +1,34 @@
 <template>
     <ListInput v-model="v" :prototype="{key: '', value: 0}" v-slot="s" :group="group">
-        <div class="input-group-prepend">
-            <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
-                    :aria-label="$t('profile.opinion.yes')"
-                    :title="$t('profile.opinion.yes')"
-                    @click="s.update({key: s.val.key, value: 1})">
-                <Icon v="heart"/>
-            </button>
-            <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
-                    :aria-label="$t('profile.opinion.jokingly')"
-                    :title="$t('profile.opinion.jokingly')"
-                    @click="s.update({key: s.val.key, value: 2})">
-                <Icon v="grin-tongue"/>
-            </button>
-            <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
-                    :aria-label="$t('profile.opinion.meh')"
-                    :title="$t('profile.opinion.meh')"
-                    @click="s.update({key: s.val.key, value: 0})">
-                <Icon v="thumbs-up"/>
-            </button>
-            <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
-                    :aria-label="$t('profile.opinion.no')"
-                    :title="$t('profile.opinion.no')"
-                    @click="s.update({key: s.val.key, value: -1})">
-                <Icon v="thumbs-down"/>
-            </button>
-        </div>
+        <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
+                :aria-label="$t('profile.opinion.yes')"
+                :title="$t('profile.opinion.yes')"
+                @click="s.update({key: s.val.key, value: 1})">
+            <Icon v="heart"/>
+        </button>
+        <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
+                :aria-label="$t('profile.opinion.jokingly')"
+                :title="$t('profile.opinion.jokingly')"
+                @click="s.update({key: s.val.key, value: 2})">
+            <Icon v="grin-tongue"/>
+        </button>
+        <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
+                :aria-label="$t('profile.opinion.meh')"
+                :title="$t('profile.opinion.meh')"
+                @click="s.update({key: s.val.key, value: 0})">
+            <Icon v="thumbs-up"/>
+        </button>
+        <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
+                :aria-label="$t('profile.opinion.no')"
+                :title="$t('profile.opinion.no')"
+                @click="s.update({key: s.val.key, value: -1})">
+            <Icon v="thumbs-down"/>
+        </button>
         <input v-model="s.val.key" class="form-control mw-input" @keyup="s.update(s.val)" required/>
-        <div v-if="validation && s.val.key" class="input-group-append">
-            <small v-if="validation(s.val.key)" class="input-group-text bg-danger text-white">
-                <Icon v="exclamation-triangle"/>
-                <span class="ml-1">{{$t(validation(s.val.key))}}</span>
-            </small>
-        </div>
+        <small v-if="validation && s.val.key && validation(s.val.key)" class="input-group-text bg-danger text-white">
+            <Icon v="exclamation-triangle"/>
+            <span class="ml-1">{{$t(validation(s.val.key))}}</span>
+        </small>
     </ListInput>
 </template>
 
diff --git a/components/ProfileOverview.vue b/components/ProfileOverview.vue
index 4edf2e05..a698ff50 100644
--- a/components/ProfileOverview.vue
+++ b/components/ProfileOverview.vue
@@ -2,21 +2,21 @@
     <div class="d-flex justify-content-between align-items-center">
         {{ locales[locale].name }}
         <span v-if="profile">
-            <LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge badge-primary">
+            <LocaleLink :locale="locale" :link="`/@${profile.username}`" class="badge bg-primary">
                 <Icon v="id-card"/>
                 <T>profile.show</T>
             </LocaleLink>
-            <LocaleLink :locale="locale" link="/editor" class="badge badge-light border">
+            <LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
                 <Icon v="edit"/>
                 <T>profile.edit</T>
             </LocaleLink>
             <Spinner v-if="deleting"/>
-            <a v-else href="#" class="badge badge-light" @click.prevent="removeProfile(locale)" :aria-label="$t('profile.delete')">
+            <a v-else href="#" class="badge bg-light text-dark" @click.prevent="removeProfile(locale)" :aria-label="$t('profile.delete')">
                 <Icon v="trash-alt"/>
             </a>
         </span>
         <span v-else>
-            <LocaleLink :locale="locale" link="/editor" class="badge badge-light border">
+            <LocaleLink :locale="locale" link="/editor" class="badge bg-light text-dark border">
                 <Icon v="plus-circle"/>
                 <T>profile.init</T>
             </LocaleLink>
diff --git a/components/Roles.vue b/components/Roles.vue
index 6c75dff5..77fa3a8f 100644
--- a/components/Roles.vue
+++ b/components/Roles.vue
@@ -12,7 +12,7 @@
     </form>
     <ul v-else class="list-unstyled">
         <li v-for="role in user.roles.split('|')">
-            <span class="badge badge-primary">{{role}}</span>
+            <span class="badge bg-primary">{{role}}</span>
         </li>
     </ul>
 </template>
diff --git a/components/Separator.vue b/components/Separator.vue
index afab5b8b..cf955ea8 100644
--- a/components/Separator.vue
+++ b/components/Separator.vue
@@ -60,7 +60,7 @@
             }
             > span {
                 box-shadow:0 2px 4px $value;
-                background: theme-color-level($color, $alert-bg-level);
+                // FIXME background: theme-color-level($color, $alert-bg-level);
                 color: $value;
             }
         }
diff --git a/components/SocialConnection.vue b/components/SocialConnection.vue
index 7aa1c5b0..c49bc6a0 100644
--- a/components/SocialConnection.vue
+++ b/components/SocialConnection.vue
@@ -5,7 +5,7 @@
             {{ providerOptions.name }}
         </span>
         <span v-if="connection === undefined">
-            <a :href="`/api/connect/${provider}`" class="badge badge-light border">
+            <a :href="`/api/connect/${provider}`" class="badge bg-light text-dark border">
                 <Icon v="link"/>
                 <T>user.socialConnection.connect</T>
             </a>
@@ -18,12 +18,12 @@
                 {{connection.name}}
             </span>
             <br class="d-md-none"/>
-            <a :href="`/api/connect/${provider}`" class="badge badge-light border">
+            <a :href="`/api/connect/${provider}`" class="badge bg-light text-dark border">
                 <Icon v="sync"/>
                 <T>user.socialConnection.refresh</T>
             </a>
             <Spinner v-if="disconnecting"/>
-            <a v-else href="#" class="badge badge-light" @click.prevent="disconnect">
+            <a v-else href="#" class="badge bg-light text-dark" @click.prevent="disconnect">
                 <Icon v="unlink"/>
                 <T>user.socialConnection.disconnect</T>
             </a>
diff --git a/components/Source.vue b/components/Source.vue
index 2878d9c2..630a3488 100644
--- a/components/Source.vue
+++ b/components/Source.vue
@@ -6,14 +6,14 @@
         </h3>
         <ul class="list-inline" v-if="manage && $isGranted('sources')">
             <li v-if="!source.approved" class="list-inline-item">
-                <span class="badge badge-danger">
+                <span class="badge bg-danger">
                     <Icon v="map-marker-question"/>
                     <T>nouns.pending</T>
                 </span>
             </li>
             <!--
             <li v-if="source.submitter" class="list-inline-item">
-                <nuxt-link :to="`/@${source.submitter}`" class="badge badge-light border btn-sm m-1">
+                <nuxt-link :to="`/@${source.submitter}`" class="badge bg-light text-dark border btn-sm m-1">
                     <Icon v="user"/>
                     <span class="btn-label">
                         <T>crud.author</T>:
@@ -23,25 +23,25 @@
             </li>
             -->
             <li v-if="!source.approved" class="list-inline-item">
-                <a href="#" class="badge badge-success btn-sm m-1" @click.prevent="approve()">
+                <a href="#" class="badge bg-success btn-sm m-1" @click.prevent="approve()">
                     <Icon v="check"/>
                     <span class="btn-label"><T>crud.approve</T></span>
                 </a>
             </li>
             <li v-else class="list-inline-item">
-                <a href="#" class="badge badge-light border border-secondary btn-sm m-1" @click.prevent="hide()">
+                <a href="#" class="badge bg-light text-dark border border-secondary btn-sm m-1" @click.prevent="hide()">
                     <Icon v="times"/>
                     <span class="btn-label"><T>crud.hide</T></span>
                 </a>
             </li>
             <li class="list-inline-item">
-                <a href="#" class="badge badge-light border border-danger btn-sm m-1" @click.prevent="remove()">
+                <a href="#" class="badge bg-light text-dark border border-danger btn-sm m-1" @click.prevent="remove()">
                     <Icon v="trash"/>
                     <span class="btn-label"><T>crud.remove</T></span>
                 </a>
             </li>
             <li class="list-inline-item">
-                <a href="#" class="badge badge-light border border-primary btn-sm m-1" @click.prevent="$emit('edit-source', source)">
+                <a href="#" class="badge bg-light text-dark border border-primary btn-sm m-1" @click.prevent="$emit('edit-source', source)">
                     <Icon v="pen"/>
                     <span class="btn-label">
                         <T>crud.edit</T>
@@ -49,12 +49,12 @@
                 </a>
             </li>
             <li class="list-inline-item">
-                <span v-for="p in source.pronouns" :class="['badge', pronounLibrary.isCanonical(p) ? 'badge-success' : 'badge-danger']">
+                <span v-for="p in source.pronouns" :class="['badge', pronounLibrary.isCanonical(p) ? 'bg-success' : 'bg-danger', 'm-1']">
                     {{p}}
                 </span>
             </li>
             <li class="list-inline-item" v-if="source.key">
-                <span class="badge badge-primary">
+                <span class="badge bg-primary">
                     <T>sources.submit.key</T>: {{source.key}}
                 </span>
             </li>
diff --git a/components/SourceSubmitForm.vue b/components/SourceSubmitForm.vue
index f035feb5..0803e86d 100644
--- a/components/SourceSubmitForm.vue
+++ b/components/SourceSubmitForm.vue
@@ -59,12 +59,10 @@
                     </p>
                     <ListInput v-model="form.pronouns" v-slot="s">
                         <input v-model="s.val" type="text" class="form-control" @keyup="s.update(s.val)" required maxlength="24"/>
-                        <div v-if="s.val && !pronounLibrary.isCanonical(s.val)" class="input-group-append">
-                            <small class="input-group-text bg-danger text-white">
-                                <Icon v="exclamation-triangle"/>
-                                <span class="ml-1"><T>profile.pronounsNotFound</T></span>
-                            </small>
-                        </div>
+                        <small v-if="s.val && !pronounLibrary.isCanonical(s.val)" class="input-group-text bg-danger text-white">
+                            <Icon v="exclamation-triangle"/>
+                            <span class="ml-1"><T>profile.pronounsNotFound</T></span>
+                        </small>
                     </ListInput>
                 </div>
                 <div class="form-group">
@@ -90,11 +88,11 @@
                 <div class="alert alert-info" v-if="form.base">
                     <Icon v="info-circle"/>
                     <T>nouns.editing</T>
-                    <button class="btn btn-sm float-right" @click="form.base = null">
+                    <button class="btn btn-sm float-end" @click="form.base = null">
                         <Icon v="times"/>
                     </button>
                 </div>
-                <button class="btn btn-success btn-block" :disabled="submitting">
+                <button class="btn btn-success w-100" :disabled="submitting">
                     <Icon v="plus-circle"/>
                     <T>sources.submit.action</T>
                 </button>
diff --git a/components/TermsDictionary.vue b/components/TermsDictionary.vue
index 866ca15a..84c23d2b 100644
--- a/components/TermsDictionary.vue
+++ b/components/TermsDictionary.vue
@@ -9,23 +9,17 @@
 
         <section class="sticky-top">
             <div class="input-group mb-3 bg-white">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">
-                        <Icon v="filter"/>
-                    </span>
-                </div>
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
                 <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
-                <div class="input-group-append" v-if="filter">
-                    <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
-                        <Icon v="times"/>
-                    </button>
-                </div>
-                <div class="input-group-append">
-                    <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
-                        <Icon v="plus-circle"/>
-                        <T>nouns.submit.action</T>
-                    </button>
-                </div>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
+                <button class="btn btn-outline-success" @click="$refs.form.$el.scrollIntoView()">
+                    <Icon v="plus-circle"/>
+                    <T>nouns.submit.action</T>
+                </button>
             </div>
         </section>
 
@@ -43,7 +37,7 @@
                         – {{s.el.definition}}
                         <template v-if="s.el.category">
                             <br/>
-                            <span class="badge badge-primary">
+                            <span class="badge bg-primary">
                                 {{s.el.category}}
                             </span>
                         </template>
@@ -63,7 +57,7 @@
                             – {{s.el.definition}}
                             <template v-if="s.el.category">
                                 <br/>
-                                <span class="badge badge-primary">
+                                <span class="badge bg-primary">
                                 {{s.el.category}}
                             </span>
                             </template>
diff --git a/components/TermsSubmitForm.vue b/components/TermsSubmitForm.vue
index 47a57d9d..8b5b9c22 100644
--- a/components/TermsSubmitForm.vue
+++ b/components/TermsSubmitForm.vue
@@ -63,12 +63,12 @@
             <div class="alert alert-info" v-if="form.base">
                 <Icon v="info-circle"/>
                 <T>nouns.editing</T>
-                <button class="btn btn-sm float-right" @click="form.base = null">
+                <button class="btn btn-sm float-end" @click="form.base = null">
                     <Icon v="times"/>
                 </button>
             </div>
 
-            <button class="btn btn-primary btn-block" :disabled="submitting">
+            <button class="btn btn-primary w-100" :disabled="submitting">
                 <template v-if="submitting">
                     <Icon v="circle-notch fa-spin"/>
                 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index a83c3bdd..9df22243 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex flex-column vh-100" :dir="config.dir || 'ltr'">
+    <div class="d-flex flex-column vh-100">
         <div class="flex-grow-1">
             <Header/>
             <Nuxt/>
diff --git a/locale/pl/nouns/NounsNav.vue b/locale/pl/nouns/NounsNav.vue
index 40a1c94c..ea32f43f 100644
--- a/locale/pl/nouns/NounsNav.vue
+++ b/locale/pl/nouns/NounsNav.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <div class="d-none d-md-inline-flex btn-group btn-block mb-2">
+        <div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
             <router-link v-for="{name, icon, route} in links" :key="name"
                          :to="buildRoute(route)"
                          :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
@@ -8,7 +8,7 @@
                 <T>nouns.{{name}}.header</T>
             </router-link>
         </div>
-        <div class="d-block d-md-none btn-group-vertical btn-block mb-2">
+        <div class="d-block d-md-none btn-group-vertical btn-block mb-2 w-100">
             <router-link v-for="{name, icon, route} in links" :key="name"
                          :to="buildRoute(route)"
                          :class="['btn', isActiveRoute(route) ? 'btn-primary' : 'btn-outline-primary']">
diff --git a/nuxt.config.js b/nuxt.config.js
index ebc53fca..c98a815a 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -53,6 +53,9 @@ const buildFlags = () => {
 export default {
     target: 'server',
     head: {
+        htmlAttrs: {
+            dir: config.dir || 'ltr',
+        },
         title: title,
         meta: [
             { charset: 'utf-8' },
diff --git a/package.json b/package.json
index c4399c1b..b23bfead 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@fortawesome/fontawesome-pro": "git+ssh://git@gitlab.com:Avris/FontAwesomePro.git",
     "avris-daemonise": "^0.0.2",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^5.0.0-beta1",
     "clipboard": "^2.0.6",
     "csv-loader": "^3.0.3",
     "sass": "^1.26.10",
diff --git a/routes/admin.vue b/routes/admin.vue
index b64b3494..de0cf216 100644
--- a/routes/admin.vue
+++ b/routes/admin.vue
@@ -16,18 +16,16 @@
                 <div class="border-top">
                     <div class="input-group mt-4">
                         <input class="form-control" v-model="userFilter" :placeholder="$t('crud.filterLong')"/>
-                        <span class="input-group-append">
-                            <button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
-                                    @click="adminsFilter = !adminsFilter"
-                            >
-                                Only admins
-                            </button>
-                            <button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
-                                    @click="localeFilter = !localeFilter"
-                            >
-                                Only this version
-                            </button>
-                        </span>
+                        <button :class="['btn', adminsFilter ? 'btn-secondary' : 'btn-outline-secondary']"
+                                @click="adminsFilter = !adminsFilter"
+                        >
+                            Only admins
+                        </button>
+                        <button :class="['btn', localeFilter ? 'btn-secondary' : 'btn-outline-secondary']"
+                                @click="localeFilter = !localeFilter"
+                        >
+                            Only this version
+                        </button>
                     </div>
                     <Table :data="visibleUsers" :columns="4">
                         <template v-slot:header>
diff --git a/routes/api.vue b/routes/api.vue
index 1f2284e3..b093edb5 100644
--- a/routes/api.vue
+++ b/routes/api.vue
@@ -13,9 +13,9 @@
             <ul>
                 <li v-for="([method, path, queryString], endpoint) in group.endpoints" class="my-3">
                     <p>
-                        <span class="badge badge-primary">{{method}}</span>
+                        <span class="badge bg-primary">{{method}}</span>
                         <code>{{path}}</code>
-                        <a v-for="example in config.api.examples[endpoint]" :href="$base + example" class="badge badge-light border mx-1" target="_blank" rel="noopener">
+                        <a v-for="example in config.api.examples[endpoint]" :href="$base + example" class="badge bg-light text-dark border mx-1" target="_blank" rel="noopener">
                             <Icon v="cog"/>
                             <T>api.example</T>
                         </a>
diff --git a/routes/census.vue b/routes/census.vue
index ba6fd3e9..8e741af7 100644
--- a/routes/census.vue
+++ b/routes/census.vue
@@ -94,7 +94,7 @@
                 </div>
             </form>
 
-            <div class="btn-group btn-block">
+            <div class="btn-group w-100">
                 <button class="btn btn-outline-primary" :disabled="q === 0" @click="q--">
                     <Icon v="arrow-alt-left"/>
                     <T>census.prev</T>
@@ -105,7 +105,7 @@
                 </button>
             </div>
 
-            <div v-if="$user() && $user().username === 'andrea'" class="mt-4 btn-group btn-block">
+            <div v-if="$user() && $user().username === 'andrea'" class="mt-4 btn-group w-100">
                 <button v-for="(question, i) in questions" :class="['btn', q === i ? 'btn-primary' : 'btn-outline-primary']" :disabled="q === i" @click="q = i">
                     {{i}}
                 </button>
diff --git a/routes/homepage.vue b/routes/homepage.vue
index ad4ec2af..8608619c 100644
--- a/routes/homepage.vue
+++ b/routes/homepage.vue
@@ -41,7 +41,7 @@
                         <em v-html="config.pronouns.multiple.description"></em>
                     </div>
                     <SimplePronounList :pronouns="config.pronouns.multiple.examples" class="mb-3"/>
-                    <a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-block">
+                    <a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary w-100">
                         <Icon v="sliders-h-square"/>
                         <T>pronouns.alt.button</T>
                     </a>
@@ -101,7 +101,7 @@
                     <p>
                         <T>home.generator.description</T>
                     </p>
-                    <a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary btn-block">
+                    <a v-if="!customise" href="#" @click.prevent="customise = true" class="btn btn-outline-primary w-100">
                         <Icon v="sliders-h-square"/>
                         <T>home.generator.button</T>
                     </a>
@@ -310,11 +310,11 @@
     .form-input {
         text-align: center;
         &.active {
-            @include alert-variant(
+            /*@include alert-variant(
                 theme-color-level('primary', $alert-bg-level),
                 theme-color-level('primary', $alert-border-level),
                 theme-color-level('primary', $alert-color-level)
-            );
+            );FIXME*/
         }
         &.form-control {
             width: auto;
@@ -325,9 +325,9 @@
         }
     }
 
-    @include media-breakpoint-up('md', $grid-breakpoints) {
+    /*@include media-breakpoint-up('md', $grid-breakpoints) {
         .btn-md-lg {
             @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
         }
-    }
+    }*/
 </style>
diff --git a/routes/names.vue b/routes/names.vue
index f7a1c7d4..feb4d8e5 100644
--- a/routes/names.vue
+++ b/routes/names.vue
@@ -11,17 +11,13 @@
 
         <section class="sticky-top">
             <div class="input-group mb-3 bg-white">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">
-                        <Icon v="filter"/>
-                    </span>
-                </div>
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
                 <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
-                <div class="input-group-append" v-if="filter">
-                    <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
-                        <Icon v="times"/>
-                    </button>
-                </div>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
             </div>
         </section>
 
diff --git a/routes/profile.vue b/routes/profile.vue
index 7236cf08..c120d1a3 100644
--- a/routes/profile.vue
+++ b/routes/profile.vue
@@ -16,7 +16,7 @@
                 </div>
                 <div v-if="Object.keys(profiles).length > 1" class="locale-list">
                     <a :href="`https://pronouns.page/@${username}`" v-if="$user() && $user().username === username"
-                       class="btn btn-outline-secondary btn-sm mb-1 mr-1"
+                       class="btn btn-outline-secondary btn-sm mb-1 me-1"
                     >
                         <Icon v="external-link"/>
                         pronouns.page/@{{username}}
@@ -24,7 +24,7 @@
                     <br/>
                     <LocaleLink v-for="(options, locale) in locales" :key="locale" v-if="profiles[locale] !== undefined"
                                 :locale="locale" :link="`/@${username}`"
-                                :class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-1 mr-1']">
+                                :class="['btn', locale === config.locale ? 'btn-primary disabled' : 'btn-outline-primary', 'btn-sm', 'mb-1 me-1']">
                         {{options.name}}
                     </LocaleLink>
                 </div>
@@ -89,7 +89,7 @@
             </h3>
 
             <div>
-                <div v-for="group in profile.words" v-if="Object.keys(profile.words).length" class="float-left w-50 w-md-25">
+                <div v-for="group in profile.words" v-if="Object.keys(profile.words).length" class="float-start w-50 w-md-25">
                     <ul class="list-unstyled">
                         <li v-for="(opinion, word) in group"><Opinion :word="word" :opinion="opinion"/></li>
                     </ul>
diff --git a/routes/profileEditor.vue b/routes/profileEditor.vue
index b45c57cf..d5f0da52 100644
--- a/routes/profileEditor.vue
+++ b/routes/profileEditor.vue
@@ -130,7 +130,7 @@
                 </template>
             </div>
 
-            <button class="btn btn-primary btn-block" type="submit">
+            <button class="btn btn-primary w-100" type="submit">
                 <Icon v="save"/>
                 <T>profile.editor.save</T>
             </button>
diff --git a/routes/sources.vue b/routes/sources.vue
index 294edfc5..ebe9bb04 100644
--- a/routes/sources.vue
+++ b/routes/sources.vue
@@ -14,7 +14,7 @@
         </section>
 
         <section v-if="config.sources.submit">
-            <button v-if="!submitShown" class="btn btn-outline-success btn-block" @click="submitShown = true">
+            <button v-if="!submitShown" class="btn btn-outline-success w-100" @click="submitShown = true">
                 <Icon v="plus-circle"/>
                 <T>sources.submit.header</T>
             </button>
@@ -22,7 +22,7 @@
         </section>
 
         <section>
-            <button v-if="!tocShown" class="btn btn-outline-primary btn-block" @click="tocShown = true">
+            <button v-if="!tocShown" class="btn btn-outline-primary w-100" @click="tocShown = true">
                 <Icon v="list"/>
                 <T>sources.toc</T>
             </button>
@@ -77,20 +77,16 @@
 
         <section class="sticky-top bg-white">
             <div class="input-group mb-1 bg-white">
-                <div class="input-group-prepend">
-                    <span class="input-group-text">
-                        <Icon v="filter"/>
-                    </span>
-                </div>
+                <span class="input-group-text">
+                    <Icon v="filter"/>
+                </span>
                 <input class="form-control border-primary" v-model="filter" :placeholder="$t('crud.filterLong')" ref="filter"/>
-                <div class="input-group-append" v-if="filter">
-                    <button class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
-                        <Icon v="times"/>
-                    </button>
-                </div>
+                <button v-if="filter" class="btn btn-outline-danger" @click="filter = ''; $refs.filter.focus()">
+                    <Icon v="times"/>
+                </button>
             </div>
 
-            <div class="btn-group btn-block">
+            <div class="btn-group w-100">
                 <button v-for="(icon, type) in sourceTypes"
                         :class="['btn btn-sm', type === filterType ? 'btn-primary' : 'btn-outline-primary']"
                         @click="filterType = type"
diff --git a/routes/team.vue b/routes/team.vue
index bc0ab7b3..6d3365b1 100644
--- a/routes/team.vue
+++ b/routes/team.vue
@@ -5,7 +5,7 @@
             <T>contact.team.name</T>
         </h2>
 
-        <figure class="float-right border rounded">
+        <figure class="float-end border rounded">
             <img src="/img/collective-logo.svg" alt=""/>
             <figcaption>
                 <p><T>contact.team.logo</T></p>
@@ -60,10 +60,10 @@
                         <a :href="`https://pronouns.page/@${member.username}`">
                             <Avatar :user="member" dsize="4rem"/>
                         </a>
-                        <span class="ml-2">
+                        <span class="ms-2">
                             {{ member.teamName }}
                             <br/>
-                            <a :href="`https://pronouns.page/@${member.username}`" class="badge badge-light border">
+                            <a :href="`https://pronouns.page/@${member.username}`" class="badge bg-light text-dark border">
                                 @{{member.username}}
                             </a>
                         </span>
diff --git a/yarn.lock b/yarn.lock
index 3ad03c64..c248509d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2172,10 +2172,10 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.5.0.tgz#97d9dbcb5a8972f8722c9962483543b907d9b9ec"
-  integrity sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==
+bootstrap@^5.0.0-beta1:
+  version "5.0.0-beta1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.0.0-beta1.tgz#18135001a452b3ec38b344ac638a1f9549285ee7"
+  integrity sha512-UrHApw/WRmT7l2rlDdn5iXr7Jps/LlMZtJlLn9G41aGDfss48hyDeYyHtX1C6NHKVcmdUarGG+ve0LZB5iHyTQ==
 
 boxen@^4.2.0:
   version "4.2.0"