From 4c8749cb9e1e4a8d61697434e372f342def7bc70 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 8 Jun 2022 16:14:24 +0200
Subject: Migrate to bootstrap 5

---
 client/package.json                                |   5 +-
 .../about-follows/about-follows.component.html     |   3 +-
 .../about-follows/about-follows.component.scss     |   1 +
 .../about-instance/about-instance.component.html   |   6 +-
 .../about-instance/about-instance.component.scss   |  11 +-
 client/src/app/+about/about.component.html         |   2 +-
 .../account-video-channels.component.html          |   2 +-
 client/src/app/+accounts/accounts.component.html   |   2 +-
 client/src/app/+accounts/accounts.component.scss   |   4 +
 .../edit-advanced-configuration.component.html     |  15 +-
 .../edit-basic-configuration.component.html        |  58 ++---
 .../edit-custom-config.component.html              |   4 +-
 .../edit-custom-config.component.scss              |   5 -
 .../edit-homepage.component.html                   |   6 +-
 .../edit-instance-information.component.html       |  28 ++-
 .../edit-live-configuration.component.html         |  18 +-
 .../edit-vod-transcoding.component.html            |  32 +--
 .../followers-list/followers-list.component.html   |   6 +-
 .../following-list/following-list.component.html   |   6 +-
 .../video-block-list.component.html                |   6 +-
 .../comments/video-comment-list.component.html     |   2 +-
 .../users/user-edit/user-edit.component.html       | 234 ++++++++++-----------
 .../+admin/overview/users/user-edit/user-edit.ts   |   4 -
 .../users/user-edit/user-password.component.html   |  26 +--
 .../users/user-edit/user-password.component.scss   |  12 +-
 .../users/user-list/user-list.component.html       |  12 +-
 .../users/user-list/user-list.component.scss       |   5 +-
 .../overview/videos/video-list.component.html      |  26 +--
 .../overview/videos/video-list.component.scss      |   6 +-
 .../plugin-search/plugin-search.component.html     |   4 +-
 .../plugin-search/plugin-search.component.scss     |   3 +-
 .../src/app/+admin/system/jobs/jobs.component.html |   8 +-
 .../src/app/+admin/system/jobs/jobs.component.scss |   4 -
 .../video-channel-edit.component.html              |  37 ++--
 .../video-channel-edit.component.scss              |  32 +--
 .../my-account-applications.component.html         |   9 +-
 .../my-account-notifications.component.html        |   6 +-
 .../my-account-profile.component.scss              |   4 -
 .../my-account-settings.component.html             |  51 ++---
 .../my-account-settings.component.scss             |   3 +-
 .../src/app/+my-account/my-account.component.html  |   2 +-
 .../src/app/+my-account/my-account.component.scss  |   2 +-
 .../my-video-channels.component.html               |   2 +-
 .../my-follows/my-followers.component.html         |   2 +-
 .../my-follows/my-subscriptions.component.html     |   2 +-
 .../my-history/my-history.component.html           |   3 +-
 .../src/app/+my-library/my-library.component.html  |   2 +-
 .../src/app/+my-library/my-library.component.scss  |   2 +-
 .../my-ownership/my-ownership.component.html       |   2 +-
 .../my-video-imports.component.html                |   2 +-
 .../my-video-playlist-edit.component.html          |   8 +-
 .../my-video-playlists.component.html              |   3 +-
 .../modals/video-change-ownership.component.html   |   2 +-
 .../modals/video-change-ownership.component.scss   |   4 -
 .../+my-library/my-videos/my-videos.component.html |   2 +-
 .../+page-not-found/page-not-found.component.html  |   6 +-
 .../src/app/+search/search-filters.component.html  |   4 +-
 .../src/app/+search/search-filters.component.scss  |   4 -
 client/src/app/+search/search.component.html       |  10 +-
 .../+register/custom-stepper.component.html        |   2 +-
 .../+register/register-step-channel.component.html |   4 +-
 .../+register/register-step-terms.component.html   |   4 +-
 .../+register/register-step-user.component.html    |   4 +-
 .../app/+signup/+register/register.component.scss  |  16 --
 .../+video-edit/shared/video-edit.component.scss   |   8 -
 .../+video-edit/video-update.component.html        |   2 +-
 .../comment/video-comment-add.component.html       |   2 +-
 .../comment/video-comment-add.component.scss       |   3 +-
 .../shared/comment/video-comment.component.html    |   2 +-
 .../shared/comment/video-comments.component.html   |   4 +-
 .../information/privacy-concerns.component.html    |   2 +-
 .../playlist/video-watch-playlist.component.html   |   6 +-
 .../playlist/video-watch-playlist.component.scss   |  58 ++---
 .../+video-watch/video-watch.component.html        |   2 +-
 .../overview/video-overview.component.html         |   2 +-
 .../src/app/header/search-typeahead.component.html |   6 +-
 client/src/app/header/suggestion.component.html    |   8 +-
 client/src/app/menu/menu.component.html            |  10 +-
 client/src/app/menu/notification.component.html    |   4 +-
 client/src/app/modal/confirm.component.html        |   2 +-
 client/src/app/modal/confirm.component.scss        |   4 -
 .../shared-abuse-list/abuse-details.component.html |  10 +-
 .../abuse-list-table.component.html                |   2 +-
 .../actor-avatar-edit.component.html               |   4 +-
 .../actor-avatar-edit.component.scss               |  52 ++---
 .../advanced-input-filter.component.html           |  13 +-
 .../advanced-input-filter.component.scss           |   1 -
 .../shared-forms/input-switch.component.html       |   2 +-
 .../input-toggle-hidden.component.html             |  24 +--
 .../input-toggle-hidden.component.scss             |  11 +-
 .../shared-forms/peertube-checkbox.component.html  |   4 +-
 .../shared-forms/peertube-checkbox.component.scss  |   2 +-
 .../select/select-channel.component.html           |   2 +-
 .../select/select-checkbox.component.html          |   4 +-
 .../select/select-checkbox.component.scss          |   2 +-
 .../instance-about-accordion.component.scss        |  23 --
 .../instance-features-table.component.html         |   2 +-
 .../instance-features-table.component.scss         |   5 +-
 .../misc/simple-search-input.component.html        |   5 +-
 .../account-block-badges.component.html            |   8 +-
 .../account-block-badges.component.scss            |   3 +-
 .../account-blocklist.component.html               |   2 +-
 .../report-modals/report.component.html            |   5 +-
 .../report-modals/video-report.component.html      |  44 ++--
 .../server-blocklist.component.html                |   2 +-
 .../shared-share-modal/video-share.component.html  |   3 +-
 .../shared-share-modal/video-share.component.scss  |   7 -
 .../user-video-settings.component.html             |   4 +-
 .../user-video-settings.component.scss             |   6 -
 .../remote-subscribe.component.html                |   2 +-
 .../live-stream-information.component.html         |   8 +-
 .../live-stream-information.component.scss         |   7 +-
 .../video-download.component.html                  |  33 +--
 .../video-download.component.scss                  |   7 +
 .../videos-list.component.html                     |   6 +-
 ...video-playlist-element-miniature.component.html |   2 +-
 ...video-playlist-element-miniature.component.scss |   5 +-
 client/src/sass/application.scss                   |  40 +++-
 client/src/sass/bootstrap.scss                     | 112 ++--------
 client/src/sass/classes.scss                       |   5 +
 client/src/sass/include/_badges.scss               |  61 ++++++
 client/src/sass/include/_bootstrap-variables.scss  |  10 +-
 client/src/sass/include/_mixins.scss               |  62 +-----
 client/src/sass/include/_variables.scss            |   1 +
 client/src/sass/player/_player-variables.scss      |   2 +
 client/src/sass/primeng-custom.scss                |   5 +-
 client/src/sass/z-index.scss                       |   1 -
 client/yarn.lock                                   |  21 +-
 128 files changed, 722 insertions(+), 847 deletions(-)
 create mode 100644 client/src/sass/include/_badges.scss

(limited to 'client')

diff --git a/client/package.json b/client/package.json
index 30f1c4cbe..4441e84a2 100644
--- a/client/package.json
+++ b/client/package.json
@@ -48,7 +48,7 @@
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@neos21/bootstrap3-glyphicons": "^1.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
     "@ng-select/ng-select": "^8.1.1",
     "@ngx-loading-bar/core": "^6.0.0",
     "@ngx-loading-bar/http-client": "^6.0.0",
@@ -57,6 +57,7 @@
     "@peertube/p2p-media-loader-hlsjs": "^1.0.8",
     "@peertube/videojs-contextmenu": "^5.5.0",
     "@peertube/xliffmerge": "^2.0.3",
+    "@popperjs/core": "^2.11.5",
     "@types/chart.js": "^2.9.16",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
@@ -79,7 +80,7 @@
     "angular2-hotkeys": "^13.1.0",
     "angularx-qrcode": "13.0.3",
     "babel-loader": "^8.2.2",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
     "cache-chunk-store": "^3.0.0",
     "chart.js": "^3.5.1",
diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html
index 6bc1d0448..f16f8bd71 100644
--- a/client/src/app/+about/about-follows/about-follows.component.html
+++ b/client/src/app/+about/about-follows/about-follows.component.html
@@ -1,5 +1,6 @@
 <div class="row">
-  <h1 class="sr-only" i18n>Follows</h1>
+  <h1 class="visually-hidden" i18n>Follows</h1>
+
   <div class="col-xl-6 col-md-12">
     <h2 i18n class="subtitle">Follower instances ({{ followersPagination.totalItems }})</h2>
 
diff --git a/client/src/app/+about/about-follows/about-follows.component.scss b/client/src/app/+about/about-follows/about-follows.component.scss
index 80eb997e4..057d04ced 100644
--- a/client/src/app/+about/about-follows/about-follows.component.scss
+++ b/client/src/app/+about/about-follows/about-follows.component.scss
@@ -15,6 +15,7 @@ a {
 
 .no-results {
   justify-content: flex-start;
+  align-items: flex-start;
 }
 
 .show-more {
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 7f2a6aa77..b113df82f 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -8,9 +8,9 @@
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
-      <span *ngFor="let category of categories" class="badge badge-primary category">{{ category }}</span>
+      <span *ngFor="let category of categories" class="pt-badge badge-primary">{{ category }}</span>
 
-      <span *ngFor="let language of languages" class="badge badge-secondary language">{{ language }}</span>
+      <span *ngFor="let language of languages" class="pt-badge badge-secondary">{{ language }}</span>
     </div>
 
     <div class="short-description">
@@ -204,7 +204,7 @@
   </div>
 
   <div class="col-md-12 col-xl-6" myPluginSelector pluginSelectorId="about-instance-features">
-    <h2 class="sr-only" i18n>FEATURES</h2>
+    <h2 class="visually-hidden" i18n>FEATURES</h2>
     <my-instance-features-table></my-instance-features-table>
   </div>
 
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 965c04b6c..a48783639 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -19,18 +19,11 @@
 }
 
 .instance-badges {
-  font-size: 16px;
   margin-bottom: 20px;
+  font-size: 16px;
 
-  .badge {
+  .pt-badge {
     @include margin-right(5px);
-
-    font-size: 12px;
-    font-weight: $font-semibold;
-
-    &.category {
-      background-color: pvar(--mainColor);
-    }
   }
 }
 
diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html
index 63d429ebf..3b7343a04 100644
--- a/client/src/app/+about/about.component.html
+++ b/client/src/app/+about/about.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div>
   <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed }">
 
     <div class="links">
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 34dc52029..0dfa87074 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Video channels</h1>
+<h1 class="visually-hidden" i18n>Video channels</h1>
 
 <div class="margin-content">
 
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index e235d9689..d92760ff8 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -18,7 +18,7 @@
                 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
               ></my-user-moderation-dropdown>
 
-              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
+              <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="pt-badge badge-danger" i18n>Banned</span>
 
               <my-account-block-badges [account]="account"></my-account-block-badges>
             </div>
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 5043b98c4..a316bd599 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -93,6 +93,10 @@ my-user-moderation-dropdown {
   }
 }
 
+.pt-badge {
+  @include margin-right(5px);
+}
+
 @media screen and (max-width: $small-view) {
   .root {
     --myGlobalTopPadding: 45px;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
index 0ab80e5a9..a17b13fdf 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-advanced-configuration.component.html
@@ -1,15 +1,15 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- cache grid -->
+
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">CACHE</div>
       <div i18n class="inner-form-description">
         Some files are not federated, and fetched when necessary. Define their caching policies.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="cache">
         <div class="form-group" formGroupName="previews">
           <label i18n for="cachePreviewsSize">Number of previews to keep in cache</label>
@@ -57,8 +57,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- cache grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- cache grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div class="anchor" id="customizations"></div> <!-- customizations anchor -->
       <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
       <div i18n class="inner-form-description">
@@ -66,8 +66,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+    <div class="col-12 col-lg-8 col-xl-9">
       <ng-container formGroupName="instance">
         <ng-container formGroupName="customizations">
           <div class="form-group">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index bae9d9775..f225c388d 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -1,13 +1,13 @@
 <ng-container [formGroup]="form">
-  <div class="form-row mt-5"> <!-- appearance grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5"> <!-- appearance grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">APPEARANCE</div>
       <div i18n class="inner-form-description">
         Use <a routerLink="/admin/plugins">plugins & themes</a> for more involved changes, or <a routerLink="/admin/config/edit-custom" fragment="advanced-configuration">add slight customizations</a>.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="theme">
         <div class="form-group">
@@ -88,15 +88,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- broadcast grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- broadcast grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">BROADCAST MESSAGE</div>
       <div i18n class="inner-for-description">
         Display a message on your instance
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="broadcastMessage">
 
@@ -144,15 +144,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- new users grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- new users grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">NEW USERS</div>
       <div i18n class="inner-for-description">
         Manage <a routerLink="/admin/users">users</a> to set their quota individually.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="signup">
         <div class="form-group">
@@ -239,20 +239,20 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- videos grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- videos grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEOS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="import">
 
         <ng-container formGroupName="videos">
 
-          <div class="form-group mt-4">
+          <div class="form-group">
             <label i18n for="importConcurrency">Import jobs concurrency</label>
-            <span i18n class="muted ml-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
+            <span i18n class="muted ms-1">allows to import multiple videos in parallel. ⚠️ Requires a PeerTube restart.</span>
 
             <div class="number-with-unit">
               <input type="number" name="importConcurrency" formControlName="concurrency" />
@@ -309,12 +309,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- video channels grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- video channels grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO CHANNELS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
       <div class="form-group" formGroupName="videoChannels">
         <label i18n for="videoChannelsMaxPerUser">Max video channels per user</label>
 
@@ -331,12 +331,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- search grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- search grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">SEARCH</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="search">
         <ng-container formGroupName="remoteUri">
@@ -420,15 +420,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- federation grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- federation grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">FEDERATION</div>
       <div i18n class="inner-form-description">
         Manage <a routerLink="/admin/follows">relations</a> with other instances.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="followers">
         <ng-container formGroupName="instance">
@@ -499,12 +499,12 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- administrators grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- administrators grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">ADMINISTRATORS</div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="form-group" formGroupName="admin">
         <label i18n for="adminEmail">Admin email</label>
@@ -527,8 +527,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-4"> <!-- Twitter grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- Twitter grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TWITTER</div>
       <div i18n class="inner-form-description">
         Provide the Twitter account representing your instance to improve link previews.
@@ -536,7 +536,7 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="services">
         <ng-container formGroupName="twitter">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8fef39b79..cc8e699f3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Configuration</h1>
+<h1 class="visually-hidden" i18n>Configuration</h1>
 
 <div class="alert alert-warning" *ngIf="!isUpdateAllowed()" i18n>
   Updating instance configuration from the web interface is disabled by the system administrator.
@@ -64,7 +64,7 @@
 
   <div [ngbNavOutlet]="nav"></div>
 
-  <div class="form-row mt-4"> <!-- submit placement block -->
+  <div class="row mt-4"> <!-- submit placement block -->
     <div class="col-md-7 col-xl-5"></div>
     <div class="col-md-5 col-xl-5">
 
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 0458d257f..31dd9f54f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -102,11 +102,6 @@ input[disabled] {
   opacity: 0.5;
 }
 
-
-.form-group-right {
-  padding-top: 2px;
-}
-
 ngb-tabset:not(.previews) ::ng-deep {
   .nav-link {
     font-size: 105%;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
index 2286a5a1a..701c3c0c1 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-homepage.component.html
@@ -2,12 +2,12 @@
 
   <ng-container formGroupName="instanceCustomHomepage">
 
-    <div class="form-row mt-5"> <!-- homepage grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- homepage grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE HOMEPAGE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceCustomHomepageContent">Homepage</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
index d806616bd..1c567d962 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html
@@ -2,13 +2,12 @@
 
   <ng-container formGroupName="instance">
 
-    <div class="form-row mt-5"> <!-- instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-5"> <!-- instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <label i18n for="instanceName">Name</label>
 
@@ -77,16 +76,15 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- moderation & nsfw grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- moderation & nsfw grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">MODERATION & NSFW</div>
-        <div i18n class="inner-for-description">
+        <div i18row="inner-for-description">
           Manage <a routerLink="/admin/users">users</a> to build a moderation team.
         </div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
-
+      <div class="col-12 col-lg-8 col-xl-9">
         <div class="form-group">
           <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
             <ng-template ptTemplate="label">
@@ -162,12 +160,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- you and your instance grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- you and your instance grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceAdministrator">Who is behind the instance?</label><my-help helpType="markdownText"></my-help>
@@ -220,12 +218,12 @@
       </div>
     </div>
 
-    <div class="form-row mt-4"> <!-- other information grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row mt-4"> <!-- other information grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div i18n class="inner-form-title">OTHER INFORMATION</div>
       </div>
 
-      <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+      <div class="col-12 col-lg-8 col-xl-9">
 
         <div class="form-group">
           <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
index 71d5d91f0..a970f3df3 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-live-configuration.component.html
@@ -1,14 +1,14 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-5">
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-5">
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">LIVE</div>
       <div i18n class="inner-form-description">
         Enable users of your instance to stream live.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
 
@@ -89,15 +89,15 @@
     </div>
   </div>
 
-  <div class="form-row"> <!-- transcoding live streams grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- transcoding live streams grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Same as VOD transcoding, transcoding live streams so that they are in a streamable form that any device can play. Requires a beefy CPU, and then some.
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="live">
         <ng-container formGroupName="transcoding">
@@ -115,7 +115,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live resolutions to generate</label>
 
-            <div class="ml-2 mt-2 d-flex flex-column">
+            <div class="ms-2 mt-2 d-flex flex-column">
               <ng-container formGroupName="resolutions">
 
                 <div class="form-group" *ngFor="let resolution of liveResolutions">
@@ -136,7 +136,7 @@
           <div class="form-group" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingThreads">Live transcoding threads</label>
 
-            <span class="muted ml-1">
+            <span class="muted ms-1">
               <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
                 will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with VOD transcoding
               </ng-container>
@@ -157,7 +157,7 @@
 
           <div class="form-group mt-4" [ngClass]="getDisabledLiveTranscodingClass()">
             <label i18n for="liveTranscodingProfile">Live transcoding profile</label>
-            <span class="muted ml-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
+            <span class="muted ms-1" i18n>new live transcoding profiles can be added by PeerTube plugins</span>
 
             <my-select-options
               id="liveTranscodingProfile"
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
index 5c0bea4a5..3d8ab094f 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html
@@ -1,8 +1,8 @@
 <ng-container [formGroup]="form">
 
-  <div class="form-row mt-4"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3"></div>
-    <div class="form-group form-group-right col-12 col-lg-8">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3"></div>
+    <div class="col-12 col-lg-8">
 
       <div class="callout callout-info">
         <span i18n>
@@ -21,8 +21,8 @@
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- transcoding grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-4"> <!-- transcoding grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">TRANSCODING</div>
       <div i18n class="inner-form-description">
         Process uploaded videos so that they are in a streamable form that any device can play. Though costly in
@@ -30,11 +30,11 @@
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="transcoding">
 
-        <div class="form-group mb-0 col-12 col-xl-11">
+        <div class="col-12 col-xl-11">
           <my-peertube-checkbox inputName="transcodingEnabled" formControlName="enabled" [recommended]="true">
             <ng-template ptTemplate="label">
               <ng-container i18n>Transcoding enabled</ng-container>
@@ -115,7 +115,7 @@
                 <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
                   <label i18n>Resolutions to generate per enabled format</label>
 
-                  <div class="ml-2 mt-2 d-flex flex-column">
+                  <div class="ms-2 mt-2 d-flex flex-column">
                     <ng-container formGroupName="resolutions">
                       <div class="form-group" *ngFor="let resolution of resolutions">
                         <my-peertube-checkbox
@@ -142,7 +142,7 @@
 
         <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingThreads">Transcoding threads</label>
-          <span class="muted ml-1">
+          <span class="muted ms-1">
             <ng-container *ngIf="getTotalTranscodingThreads().atMost" i18n>
               will claim at most {{ getTotalTranscodingThreads().value }} {{ getTotalTranscodingThreads().unit }} with live transcoding
             </ng-container>
@@ -162,9 +162,9 @@
           <div *ngIf="formErrors.transcoding.threads" class="form-error">{{ formErrors.transcoding.threads }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingConcurrency">Transcoding jobs concurrency</label>
-          <span class="muted ml-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
+          <span class="muted ms-1" i18n>allows to transcode multiple files in parallel. ⚠️ Requires a PeerTube restart</span>
 
           <div class="number-with-unit">
             <input type="number" name="transcodingConcurrency" formControlName="concurrency" />
@@ -174,9 +174,9 @@
           <div *ngIf="formErrors.transcoding.concurrency" class="form-error">{{ formErrors.transcoding.concurrency }}</div>
         </div>
 
-        <div class="form-group mt-4" [ngClass]="getTranscodingDisabledClass()">
+        <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
           <label i18n for="transcodingProfile">Transcoding profile</label>
-          <span class="muted ml-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
+          <span class="muted ms-1" i18n>new transcoding profiles can be added by PeerTube plugins</span>
 
           <my-select-options
             id="transcodingProfile"
@@ -193,15 +193,15 @@
     </div>
   </div>
 
-  <div class="form-row mt-2"> <!-- video studio grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row mt-2"> <!-- video studio grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div i18n class="inner-form-title">VIDEO STUDIO</div>
       <div i18n class="inner-form-description">
         Allows your users to edit their video (cut, add intro/outro, add a watermark etc)
       </div>
     </div>
 
-    <div class="form-group form-group-right col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <ng-container formGroupName="videoStudio">
         <div class="form-group" [ngClass]="getTranscodingDisabledClass()">
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 1df7bb164..38def2fbb 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -12,7 +12,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -46,10 +46,10 @@
       </td>
 
       <td *ngIf="follow.state === 'accepted'">
-        <span class="badge badge-green" i18n>Accepted</span>
+        <span class="pt-badge badge-green" i18n>Accepted</span>
       </td>
       <td *ngIf="follow.state === 'pending'">
-        <span class="badge badge-yellow" i18n>Pending</span>
+        <span class="pt-badge badge-yellow" i18n>Pending</span>
       </td>
 
       <td>{{ follow.score }}</td>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 767e92d18..207ca81a4 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -19,7 +19,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -48,10 +48,10 @@
       </td>
 
       <td *ngIf="follow.state === 'accepted'">
-        <span class="badge badge-green" i18n>Accepted</span>
+        <span class="pt-badge badge-green" i18n>Accepted</span>
       </td>
       <td *ngIf="follow.state === 'pending'">
-        <span class="badge badge-yellow" i18n>Pending</span>
+        <span class="pt-badge badge-yellow" i18n>Pending</span>
       </td>
 
       <td>{{ follow.createdAt | date: 'short' }}</td>
diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
index 3634951c9..b302014b6 100644
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@@ -13,7 +13,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
@@ -53,11 +53,11 @@
       </td>
 
       <td>
-        <span *ngIf="videoBlock.video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="videoBlock.video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
       </td>
 
       <td>
-        <span *ngIf="videoBlock.unfederated" class="badge badge-blue" i18n>Unfederated</span>
+        <span *ngIf="videoBlock.unfederated" class="pt-badge badge-blue" i18n>Unfederated</span>
       </td>
 
       <td>
diff --git a/client/src/app/+admin/overview/comments/video-comment-list.component.html b/client/src/app/+admin/overview/comments/video-comment-list.component.html
index 27a5d82ff..6fdefbfe2 100644
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@@ -25,7 +25,7 @@
         </my-action-dropdown>
       </div>
 
-      <div class="ml-auto right-form">
+      <div class="ms-auto right-form">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
index 772ebf272..7e0eaf280 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html
@@ -57,7 +57,7 @@
   </div>
 </ng-template>
 
-<div class="form-row" *ngIf="!isInBigView()"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
+<div class="row d-xxl-none"> <!-- hidden on large screens, as it is then displayed on the right side of the form -->
   <div class="col-12 col-xl-3"></div>
 
   <div class="col-12 col-xl-9">
@@ -67,8 +67,8 @@
 
 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
 
-<div class="form-row mt-4"> <!-- user grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-4"> <!-- user grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="user"></div> <!-- user anchor -->
     <div *ngIf="isCreation()" class="account-title" i18n>NEW USER</div>
     <div *ngIf="!isCreation() && user" class="account-title">
@@ -76,150 +76,150 @@
     </div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
-
-    <form role="form" (ngSubmit)="formValidated()" [formGroup]="form" [ngClass]="{ 'col-5': isInBigView() }">
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="username">Username</label>
-        <input
-          type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
-          formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
-        >
-        <div *ngIf="formErrors.username" class="form-error">
-          {{ formErrors.username }}
+  <div class="col-12 col-lg-8 col-xl-9">
+    <div class="row">
+      <form class="col" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="username">Username</label>
+          <input
+            type="text" id="username" i18n-placeholder placeholder="john" class="form-control"
+            formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
+          >
+          <div *ngIf="formErrors.username" class="form-error">
+            {{ formErrors.username }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="channelName">Channel name</label>
-        <input
-          type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
-          formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
-        >
-        <div *ngIf="formErrors.channelName" class="form-error">
-          {{ formErrors.channelName }}
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="channelName">Channel name</label>
+          <input
+            type="text" id="channelName" i18n-placeholder placeholder="john_channel" class="form-control"
+            formControlName="channelName" [ngClass]="{ 'input-error': formErrors['channelName'] }"
+          >
+          <div *ngIf="formErrors.channelName" class="form-error">
+            {{ formErrors.channelName }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="email">Email</label>
-        <input
-          type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
-          formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
-          autocomplete="off" [readonly]="user && user.pluginAuth !== null"
-        >
-        <div *ngIf="formErrors.email" class="form-error">
-          {{ formErrors.email }}
+        <div class="form-group">
+          <label i18n for="email">Email</label>
+          <input
+            type="text" id="email" i18n-placeholder placeholder="mail@example.com" class="form-control"
+            formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
+            autocomplete="off" [readonly]="user && user.pluginAuth !== null"
+          >
+          <div *ngIf="formErrors.email" class="form-error">
+            {{ formErrors.email }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="isCreation()">
-        <label i18n for="password">Password</label>
-        <my-help *ngIf="isPasswordOptional()">
-          <ng-template ptTemplate="customHtml">
-            <ng-container i18n>
-              If you leave the password empty, an email will be sent to the user.
-            </ng-container>
-          </ng-template>
-        </my-help>
-
-        <my-input-toggle-hidden
-          formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
-        ></my-input-toggle-hidden>
-
-        <div *ngIf="formErrors.password" class="form-error">
-          {{ formErrors.password }}
+        <div class="form-group" *ngIf="isCreation()">
+          <label i18n for="password">Password</label>
+          <my-help *ngIf="isPasswordOptional()">
+            <ng-template ptTemplate="customHtml">
+              <ng-container i18n>
+                If you leave the password empty, an email will be sent to the user.
+              </ng-container>
+            </ng-template>
+          </my-help>
+
+          <my-input-toggle-hidden
+            formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+          ></my-input-toggle-hidden>
+
+          <div *ngIf="formErrors.password" class="form-error">
+            {{ formErrors.password }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="role">Role</label>
-        <div class="peertube-select-container">
-            <select id="role" formControlName="role" class="form-control">
-              <option *ngFor="let role of roles" [value]="role.value">
-               {{ role.label }}
-              </option>
-            </select>
+        <div class="form-group">
+          <label i18n for="role">Role</label>
+          <div class="peertube-select-container">
+              <select id="role" formControlName="role" class="form-control">
+                <option *ngFor="let role of roles" [value]="role.value">
+                {{ role.label }}
+                </option>
+              </select>
+          </div>
+
+          <div *ngIf="formErrors.role" class="form-error">
+            {{ formErrors.role }}
+          </div>
         </div>
 
-        <div *ngIf="formErrors.role" class="form-error">
-          {{ formErrors.role }}
+        <div class="form-group">
+          <label i18n for="videoQuota">Video quota</label>
+
+          <my-select-custom-value
+            id="videoQuota"
+            [items]="videoQuotaOptions"
+            formControlName="videoQuota"
+            i18n-inputSuffix inputSuffix="bytes" inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
+
+          <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
+            Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
+            At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
+          </div>
+
+          <div *ngIf="formErrors.videoQuota" class="form-error">
+            {{ formErrors.videoQuota }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <label i18n for="videoQuota">Video quota</label>
-
-        <my-select-custom-value
-          id="videoQuota"
-          [items]="videoQuotaOptions"
-          formControlName="videoQuota"
-          i18n-inputSuffix inputSuffix="bytes" inputType="number"
-          [clearable]="false"
-        ></my-select-custom-value>
-
-        <div i18n class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
-          Transcoding is enabled. The video quota only takes into account <strong>original</strong> video size. <br />
-          At most, this user could upload ~ {{ computeQuotaWithTranscoding() | bytes: 0 }}.
-        </div>
+        <div class="form-group">
+          <label i18n for="videoQuotaDaily">Daily video quota</label>
 
-        <div *ngIf="formErrors.videoQuota" class="form-error">
-          {{ formErrors.videoQuota }}
-        </div>
-      </div>
+          <my-select-custom-value
+            id="videoQuotaDaily"
+            [items]="videoQuotaDailyOptions"
+            formControlName="videoQuotaDaily"
+            i18n-inputSuffix inputSuffix="bytes" inputType="number"
+            [clearable]="false"
+          ></my-select-custom-value>
 
-      <div class="form-group">
-        <label i18n for="videoQuotaDaily">Daily video quota</label>
-
-        <my-select-custom-value
-          id="videoQuotaDaily"
-          [items]="videoQuotaDailyOptions"
-          formControlName="videoQuotaDaily"
-          i18n-inputSuffix inputSuffix="bytes" inputType="number"
-          [clearable]="false"
-        ></my-select-custom-value>
-
-        <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
-          {{ formErrors.videoQuotaDaily }}
+          <div *ngIf="formErrors.videoQuotaDaily" class="form-error">
+            {{ formErrors.videoQuotaDaily }}
+          </div>
         </div>
-      </div>
 
-      <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
-        <label i18n for="pluginAuth">Auth plugin</label>
+        <div class="form-group" *ngIf="!isCreation() && getAuthPlugins().length !== 0">
+          <label i18n for="pluginAuth">Auth plugin</label>
 
-        <div class="peertube-select-container">
-          <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
-            <option [value]="null" i18n>None (local authentication)</option>
-            <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
-          </select>
+          <div class="peertube-select-container">
+            <select id="pluginAuth" formControlName="pluginAuth" class="form-control">
+              <option [value]="null" i18n>None (local authentication)</option>
+              <option *ngFor="let authPlugin of getAuthPlugins()" [value]="authPlugin">{{ authPlugin }}</option>
+            </select>
+          </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <my-peertube-checkbox
-          inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
-          i18n-labelText labelText="Doesn't need review before a video goes public"
-        ></my-peertube-checkbox>
-      </div>
+        <div class="form-group">
+          <my-peertube-checkbox
+            inputName="byPassAutoBlock" formControlName="byPassAutoBlock"
+            i18n-labelText labelText="Doesn't need review before a video goes public"
+          ></my-peertube-checkbox>
+        </div>
 
-      <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
-    </form>
+        <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
+      </form>
 
-    <div *ngIf="isInBigView()" class="col-7">
-      <ng-template *ngTemplateOutlet="dashboard"></ng-template>
+      <div class="d-none d-xxl-block col-7">
+        <ng-template *ngTemplateOutlet="dashboard"></ng-template>
+      </div>
     </div>
-
   </div>
 </div>
 
 
-<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="form-row mt-4"> <!-- danger zone grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div *ngIf="!isCreation() && user && user.pluginAuth === null" class="row mt-4"> <!-- danger zone grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="danger"></div> <!-- danger zone anchor -->
     <div i18n class="account-title account-title-danger">DANGER ZONE</div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9" [ngClass]="{ 'form-row': isInBigView() }">
+  <div class="col-12 col-lg-8 col-xl-9">
 
     <div class="danger-zone">
       <div class="form-group reset-password-email">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.ts b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
index 069b62a53..395d07423 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-edit.ts
+++ b/client/src/app/+admin/overview/users/user-edit/user-edit.ts
@@ -46,10 +46,6 @@ export abstract class UserEdit extends FormReactive implements OnInit {
       .concat(this.serverConfig.plugin.registeredExternalAuths.map(p => p.npmName))
   }
 
-  isInBigView () {
-    return this.screenService.getWindowInnerWidth() > 1600
-  }
-
   buildRoles () {
     const authUser = this.auth.getUser()
 
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.html b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
index 1238d1839..35f36e465 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.html
@@ -1,20 +1,16 @@
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
-  <div class="form-group">
+  <div class="input-group">
+    <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+    >
+    <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
+      <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
+      <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
+    </button>
+  </div>
 
-    <div class="input-group">
-      <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
-        formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
-      >
-      <div class="input-group-append">
-        <button class="btn btn-sm btn-outline-secondary" (click)="togglePasswordVisibility()" type="button">
-          <ng-container *ngIf="!showPassword" i18n>Show</ng-container>
-          <ng-container *ngIf="!!showPassword" i18n>Hide</ng-container>
-        </button>
-      </div>
-    </div>
-    <div *ngIf="formErrors.password" class="form-error">
-      {{ formErrors.password }}
-    </div>
+  <div *ngIf="formErrors.password" class="form-error">
+    {{ formErrors.password }}
   </div>
 
   <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
index acb680682..54f782086 100644
--- a/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
+++ b/client/src/app/+admin/overview/users/user-edit/user-password.component.scss
@@ -1,13 +1,9 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-input:not([type=submit]):not([type=checkbox]) {
+input[type=text],
+input[type=password] {
   @include peertube-input-text(340px);
-
-  display: block;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0;
 }
 
 input[type=submit] {
@@ -17,7 +13,3 @@ input[type=submit] {
 
   margin-top: 10px;
 }
-
-.input-group-append {
-  height: 30px;
-}
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.html b/client/src/app/+admin/overview/users/user-list/user-list.component.html
index 62eeef8fe..f6915ae9a 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@@ -26,7 +26,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
 
@@ -90,7 +90,7 @@
         </my-user-moderation-dropdown>
       </td>
 
-      <td *ngIf="isSelected('username')">
+      <td *ngIf="isSelected('username')" class="cell-username">
         <a i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer" [routerLink]="[ '/a/' + user.username ]">
           <div class="chip two-lines">
             <my-actor-avatar [account]="user?.account" size="32"></my-actor-avatar>
@@ -101,13 +101,13 @@
           </div>
         </a>
 
-        <div *ngIf="user.accountMutedStatus.mutedByInstance" class="badges-username badge badge-red" i18n>Muted</div>
-        <div *ngIf="user.blocked" class="badges-username badge badge-red" i18n>Banned</div>
+        <div *ngIf="user.accountMutedStatus.mutedByInstance" class="pt-badge badge-red" i18n>Muted</div>
+        <div *ngIf="user.blocked" class="pt-badge badge-red" i18n>Banned</div>
       </td>
 
       <td *ngIf="isSelected('role')">
-        <span *ngIf="user.blocked" class="badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
-        <span *ngIf="!user.blocked" class="badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
+        <span *ngIf="user.blocked" class="pt-badge badge-banned" i18n-title title="The user was banned">{{ user.roleLabel }}</span>
+        <span *ngIf="!user.blocked" class="pt-badge" [ngClass]="getRoleClass(user.role)">{{ user.roleLabel }}</span>
       </td>
 
       <td *ngIf="isSelected('email')" [title]="user.email">
diff --git a/client/src/app/+admin/overview/users/user-list/user-list.component.scss b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
index 8160703f0..6449f5064 100644
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.scss
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '~bootstrap/scss/functions' as *;
 
 .add-button {
   @include create-button;
@@ -23,8 +24,8 @@ tr.banned > td {
   font-weight: $font-semibold;
 }
 
-.badges-username {
-  margin-left: 15px;
+.cell-username .pt-badge {
+  @include margin-left(15px);
 }
 
 .user-table-primary-text .glyphicon {
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
index 75d9be5f1..2f36c27b7 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -21,7 +21,7 @@
         </my-action-dropdown>
       </div>
 
-      <div class="ml-auto right-form">
+      <div class="ms-auto right-form">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
 
         <my-button i18n-label label="Refresh" icon="refresh" (click)="reloadData()"></my-button>
@@ -67,25 +67,25 @@
       </td>
 
       <td>
-        <span class="badge badge-blue" *ngIf="video.isLocal">Local</span>
-        <span class="badge badge-purple" *ngIf="!video.isLocal">Remote</span>
+        <span class="pt-badge badge-blue" *ngIf="video.isLocal">Local</span>
+        <span class="pt-badge badge-purple" *ngIf="!video.isLocal">Remote</span>
 
-        <span [ngClass]="getPrivacyBadgeClass(video)" class="badge">{{ video.privacy.label }}</span>
+        <span [ngClass]="getPrivacyBadgeClass(video)" class="pt-badge">{{ video.privacy.label }}</span>
 
-        <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="video.nsfw" class="pt-badge badge-red" i18n>NSFW</span>
 
-        <span *ngIf="isUnpublished(video)" class="badge badge-yellow" i18n>{{ video.state.label }}</span>
+        <span *ngIf="isUnpublished(video)" class="pt-badge badge-yellow" i18n>{{ video.state.label }}</span>
 
-        <span *ngIf="isAccountBlocked(video)" class="badge badge-red" i18n>Account muted</span>
-        <span *ngIf="isServerBlocked(video)" class="badge badge-red" i18n>Server muted</span>
+        <span *ngIf="isAccountBlocked(video)" class="pt-badge badge-red" i18n>Account muted</span>
+        <span *ngIf="isServerBlocked(video)" class="pt-badge badge-red" i18n>Server muted</span>
 
-        <span *ngIf="isVideoBlocked(video)" class="badge badge-red" i18n>Blocked</span>
+        <span *ngIf="isVideoBlocked(video)" class="pt-badge badge-red" i18n>Blocked</span>
       </td>
 
       <td>
-        <span *ngIf="isHLS(video)" class="badge badge-blue">HLS</span>
-        <span *ngIf="isWebTorrent(video)" class="badge badge-blue">WebTorrent ({{ video.files.length }})</span>
-        <span *ngIf="video.isLive" class="badge badge-blue">Live</span>
+        <span *ngIf="isHLS(video)" class="pt-badge badge-blue">HLS</span>
+        <span *ngIf="isWebTorrent(video)" class="pt-badge badge-blue">WebTorrent ({{ video.files.length }})</span>
+        <span *ngIf="video.isLive" class="pt-badge badge-blue">Live</span>
 
         <span *ngIf="!isImport(video) && !video.isLive && video.isLocal">{{ getFilesSize(video) | bytes: 1 }}</span>
       </td>
@@ -121,7 +121,7 @@
             </ul>
           </div>
 
-          <my-embed class="ml-auto" [video]="video"></my-embed>
+          <my-embed class="ms-auto" [video]="video"></my-embed>
         </div>
       </td>
     </tr>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
index cb47b6548..dcd41a1b4 100644
--- a/client/src/app/+admin/overview/videos/video-list.component.scss
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -7,10 +7,8 @@ my-embed {
   width: 50%;
 }
 
-.badge {
-  @include peertube-badge;
-
-  margin-right: 5px;
+.pt-badge {
+  @include margin-right(5px);
 }
 
 .video-info > div {
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 33575ef52..23dde86b4 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -32,9 +32,9 @@
   <ng-container *ngFor="let plugin of plugins" >
     <my-plugin-card [plugin]="plugin" [version]="plugin.latestVersion" [pluginType]="pluginType">
       <div ngProjectAs="badges">
-        <span i18n *ngIf="plugin.installed" class="badge badge-success">Installed</span>
+        <span i18n *ngIf="plugin.installed" class="pt-badge badge-success">Installed</span>
 
-        <span *ngIf="plugin.official" class="badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
+        <span *ngIf="plugin.official" class="pt-badge badge-primary" i18n i18n-title title="This plugin is developed by Framasoft">
           Official
         </span>
       </div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index 10401e9df..55baa038f 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -22,11 +22,10 @@
   }
 }
 
-.badge {
+.pt-badge {
   @include margin-left(15px);
 
   font-size: 13px;
-  font-weight: $font-semibold;
 }
 
 .alert {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.html b/client/src/app/+admin/system/jobs/jobs.component.html
index 301591786..8068fe626 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@@ -21,7 +21,7 @@
         <span i18n="Selector for the list displaying jobs, filtering by their state">any</span>
       </ng-option>
       <ng-option *ngFor="let state of jobStates" [value]="state">
-        <span class="badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
+        <span class="pt-badge" [ngClass]="getJobStateClass(state)">{{ state }}</span>
       </ng-option>
     </ng-select>
   </div>
@@ -62,7 +62,7 @@
       <td class="job-priority c-hand" [pRowToggler]="job">{{ job.priority }}</td>
 
       <td class="job-state c-hand" [pRowToggler]="job" *ngIf="jobState === 'all'">
-        <span class="badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
+        <span class="pt-badge" [ngClass]="getJobStateClass(job.state)">{{ job.state }}</span>
       </td>
 
       <td *ngIf="hasGlobalProgress()" class="job-progress c-hand" [pRowToggler]="job">
@@ -107,8 +107,8 @@
             </ng-container>
 
             <ng-container *ngIf="jobState !== 'all'">
-              <ng-container *ngIf="jobType === 'all'" i18n>No <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
-              <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
+              <ng-container *ngIf="jobType === 'all'" i18n>No <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span> jobs found.</ng-container>
+              <ng-container *ngIf="jobType !== 'all'" i18n>No <code>{{ jobType }}</code> jobs found that are <span class="pt-badge" [ngClass]="getJobStateClass(jobState)">{{ jobState }}</span>.</ng-container>
             </ng-container>
           </div>
         </div>
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss
index a9e5e8d4b..eadaf7904 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.scss
+++ b/client/src/app/+admin/system/jobs/jobs.component.scss
@@ -55,7 +55,3 @@ pre {
 .job-error {
   color: #ff0000;
 }
-
-.select-filter-block .badge {
-  @include peertube-badge;
-}
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
index 3751747a9..61b89082c 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.html
@@ -3,42 +3,41 @@
 <div class="margin-content">
   <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-    <div class="form-row"> <!-- channel grid -->
-      <div class="form-group col-12 col-lg-4 col-xl-3">
+    <div class="row"> <!-- channel grid -->
+      <div class="col-12 col-lg-4 col-xl-3">
         <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
         <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
       </div>
-  
-      <div class="form-group col-12 col-lg-8 col-xl-9">
+
+      <div class="col-12 col-lg-8 col-xl-9">
         <h6 i18n>Banner image of the channel</h6>
-  
+
         <my-actor-banner-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
         ></my-actor-banner-edit>
-  
+
         <my-actor-avatar-edit
           *ngIf="videoChannel" [previewImage]="isCreation()"
           [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
           [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
         ></my-actor-avatar-edit>
-  
+
         <div class="form-group" *ngIf="isCreation()">
           <label i18n for="name">Name</label>
+
           <div class="input-group">
             <input
               type="text" id="name" i18n-placeholder placeholder="Example: my_channel"
               formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }" class="form-control"
             >
-            <div class="input-group-append">
-              <span class="input-group-text">@{{ instanceHost }}</span>
-            </div>
+            <div class="input-group-text">@{{ instanceHost }}</div>
           </div>
           <div *ngIf="formErrors['name']" class="form-error">
             {{ formErrors['name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="display-name">Display name</label>
           <input
@@ -49,7 +48,7 @@
             {{ formErrors['display-name'] }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label i18n for="description">Description</label>
           <textarea
@@ -60,7 +59,7 @@
             {{ formErrors.description }}
           </div>
         </div>
-  
+
         <div class="form-group">
           <label for="support">Support</label>
           <my-help
@@ -75,22 +74,22 @@
             {{ formErrors.support }}
           </div>
         </div>
-  
+
         <div class="form-group" *ngIf="isBulkUpdateVideosDisplayed()">
           <my-peertube-checkbox
             inputName="bulkVideosSupportUpdate" formControlName="bulkVideosSupportUpdate"
             i18n-labelText labelText="Overwrite support field of all videos of this channel"
           ></my-peertube-checkbox>
         </div>
-  
+
       </div>
     </div>
-  
-    <div class="form-row"> <!-- submit placement block -->
+
+    <div class="row"> <!-- submit placement block -->
       <div class="col-md-7 col-xl-5"></div>
       <div class="col-md-5 col-xl-5 d-inline-flex">
         <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
       </div>
     </div>
-  </form>  
-</div>
\ No newline at end of file
+  </form>
+</div>
diff --git a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
index d010d6277..2c720314a 100644
--- a/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
+++ b/client/src/app/+manage/video-channel-edit/video-channel-edit.component.scss
@@ -24,31 +24,21 @@ my-actor-banner-edit {
   max-width: 500px;
 }
 
-.input-group {
-  @include peertube-input-group(fit-content);
-}
-
-.input-group-append {
-  height: 30px;
-}
-
-input {
-  &[type=text] {
-    @include peertube-input-text(340px);
+input[type=text] {
+  @include peertube-input-text(340px);
 
-    display: block;
+  display: block;
 
-    &#name {
-      width: auto;
-      flex-grow: 1;
-    }
+  &#name {
+    width: auto;
+    flex-grow: 1;
   }
+}
 
-  &[type=submit] {
-    @include peertube-button;
-    @include orange-button;
-    @include margin-left(auto);
-  }
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+  @include margin-left(auto);
 }
 
 textarea {
diff --git a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
index 68d094a4f..8f3a55be5 100644
--- a/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
+++ b/client/src/app/+my-account/my-account-applications/my-account-applications.component.html
@@ -3,8 +3,9 @@
   <ng-container i18n>Applications</ng-container>
 </h1>
 
-<div class="form-row"> <!-- built-in token grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row"> <!-- built-in token grid -->
+
+  <div class="group col-12 col-lg-4 col-xl-3">
     <h2 i18n class="applications-title">SUBSCRIPTION FEED</h2>
     <div i18n class="applications-description">
       Use third-party feed aggregators to retrieve the list of videos from
@@ -12,7 +13,7 @@
     </div>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
 
     <div class="form-group">
       <label i18n for="feed-url">Feed URL</label>
@@ -29,7 +30,7 @@
   </div>
 </div>
 
-<div class="form-row mt-4"> <!-- submit placement block -->
+<div class="row mt-4"> <!-- submit placement block -->
   <div class="col-md-7 col-xl-5"></div>
   <div class="col-md-5 col-xl-5">
     <input (click)="renewToken()" type="submit" i18n-value value="Renew token">
diff --git a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
index f0e9f4010..b98cd1156 100644
--- a/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
+++ b/client/src/app/+my-account/my-account-notifications/my-account-notifications.component.html
@@ -1,11 +1,11 @@
-<h1 class="sr-only" i18n>Notifications</h1>
+<h1 class="visually-hidden" i18n>Notifications</h1>
 <div class="header">
   <a routerLink="/my-account/settings" fragment="notifications" i18n>
     <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
     Notification preferences
   </a>
 
-  <div class="peertube-select-container peertube-select-button ml-2 mr-2">
+  <div class="peertube-select-container peertube-select-button ms-2 me-2">
     <select [(ngModel)]="notificationSortType" (ngModelChange)="onChangeSortColumn()" class="form-control">
       <option value="undefined" disabled>Sort by</option>
       <option value="createdAt" i18n>Newest first</option>
@@ -13,7 +13,7 @@
     </select>
   </div>
 
-  <button class="btn ml-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
+  <button class="btn ms-auto" [disabled]="!hasUnreadNotifications()" (click)="markAllAsRead()">
     <ng-container *ngIf="hasUnreadNotifications()">
       <my-global-icon iconName="tick" aria-hidden="true"></my-global-icon>
 
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
index cbac81d01..78f7ef1d5 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss
@@ -6,10 +6,6 @@ label {
   font-size: 100%;
 }
 
-.form-group:first-child {
-  margin-bottom: 15px;
-}
-
 input#username + .muted {
   margin-top: 5px;
 }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 8ca197fd4..abcfe54a6 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -1,18 +1,19 @@
-<h1 class="sr-only" i18n>Settings</h1>
-<div class="form-row"> <!-- preview -->
-  <div class="form-group col-12 col-lg-4 col-xl-3"></div>
+<h1 class="visually-hidden" i18n>Settings</h1>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+<div class="row"> <!-- preview -->
+  <div class="col-12 col-lg-4 col-xl-3"></div>
+
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-actor-avatar-edit [actor]="user.account" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"></my-actor-avatar-edit>
   </div>
 </div>
 
-<div class="form-row"> <!-- profile settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-3"> <!-- profile settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PROFILE SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
 
     <my-user-quota [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-quota>
 
@@ -20,64 +21,64 @@
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- interface grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- interface grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">INTERFACE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-interface-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-interface-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- video settings grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- video settings grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="video-settings"></div> <!-- video settings anchor -->
     <h2 i18n class="account-title">VIDEO SETTINGS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-user-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-user-video-settings>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- notifications grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- notifications grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <div class="anchor" id="notifications"></div> <!-- notifications anchor -->
     <h2 i18n class="account-title">NOTIFICATIONS</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-notification-preferences [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-notification-preferences>
   </div>
 </div>
 
-<div class="form-row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- password grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">PASSWORD</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-password></my-account-change-password>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- email grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- email grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">EMAIL</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-change-email></my-account-change-email>
   </div>
 </div>
 
-<div class="form-row mt-5"> <!-- danger zone grid -->
-  <div class="form-group col-12 col-lg-4 col-xl-3">
+<div class="row mt-5"> <!-- danger zone grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title account-title-danger">DANGER ZONE</h2>
   </div>
 
-  <div class="form-group col-12 col-lg-8 col-xl-9">
+  <div class="col-12 col-lg-8 col-xl-9">
     <my-account-danger-zone [user]="user"></my-account-danger-zone>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 1c216d79d..8206f4dd8 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '~bootstrap/scss/functions' as *;
 
 .account-title {
   @include settings-big-title;
@@ -9,6 +10,6 @@
   }
 }
 
-.form-group {
+.row > div {
   max-width: 500px;
 }
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-account/my-account.component.scss b/client/src/app/+my-account/my-account.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-account/my-account.component.scss
+++ b/client/src/app/+my-account/my-account.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
index f17f62bba..aa51764be 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channels.component.html
@@ -1,7 +1,7 @@
 <h1>
   <my-global-icon iconName="channel" aria-hidden="true"></my-global-icon>
   <ng-container i18n>My channels</ng-container>
-  <span class="badge badge-secondary">{{ totalItems }}</span>
+  <span *ngIf="totalItems" class="pt-badge badge-secondary">{{ totalItems }}</span>
 </h1>
 
 <my-channels-setup-message [hideLink]="true"></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-follows/my-followers.component.html b/client/src/app/+my-library/my-follows/my-followers.component.html
index a8a3da863..2827f8c41 100644
--- a/client/src/app/+my-library/my-follows/my-followers.component.html
+++ b/client/src/app/+my-library/my-follows/my-followers.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="follower" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My followers</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
diff --git a/client/src/app/+my-library/my-follows/my-subscriptions.component.html b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
index 391c4d3be..11d460b19 100644
--- a/client/src/app/+my-library/my-follows/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-follows/my-subscriptions.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My subscriptions</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 </h1>
 
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html
index 14bf01804..76367c029 100644
--- a/client/src/app/+my-library/my-history/my-history.component.html
+++ b/client/src/app/+my-library/my-history/my-history.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My watch history</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My watch history</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <div class="top-buttons">
diff --git a/client/src/app/+my-library/my-library.component.html b/client/src/app/+my-library/my-library.component.html
index b465d0156..1c44c8472 100644
--- a/client/src/app/+my-library/my-library.component.html
+++ b/client/src/app/+my-library/my-library.component.html
@@ -1,4 +1,4 @@
-<div class="row">
+<div class="root">
   <my-top-menu-dropdown [menuEntries]="menuEntries"></my-top-menu-dropdown>
 
   <div class="margin-content pb-5" [ngClass]="{ 'offset-content': !isBroadcastMessageDisplayed }">
diff --git a/client/src/app/+my-library/my-library.component.scss b/client/src/app/+my-library/my-library.component.scss
index 1ec25315a..6275b7ac2 100644
--- a/client/src/app/+my-library/my-library.component.scss
+++ b/client/src/app/+my-library/my-library.component.scss
@@ -1,7 +1,7 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.row {
+.root {
   @include sub-menu-h1;
 
   flex-direction: column;
diff --git a/client/src/app/+my-library/my-ownership/my-ownership.component.html b/client/src/app/+my-library/my-ownership/my-ownership.component.html
index c29c71c0a..01470e46f 100644
--- a/client/src/app/+my-library/my-ownership/my-ownership.component.html
+++ b/client/src/app/+my-library/my-ownership/my-ownership.component.html
@@ -65,7 +65,7 @@
       <td>{{ videoChangeOwnership.createdAt | date: 'short' }}</td>
 
       <td>
-        <span class="badge"
+        <span class="pt-badge"
           [ngClass]="getStatusClass(videoChangeOwnership.status)">{{ videoChangeOwnership.status }}</span>
       </td>
     </tr>
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index e0d4e8f14..c5f0db17f 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -50,7 +50,7 @@
       </td>
 
       <td>
-        <span class="badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
+        <span class="pt-badge" [ngClass]="getVideoImportStateClass(videoImport.state.id)">
           {{ videoImport.state.label }}
         </span>
       </td>
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
index c39e90a1e..35682cf81 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html
@@ -20,13 +20,13 @@
 
 <form role="form" (ngSubmit)="formValidated()" [formGroup]="form">
 
-  <div class="form-row"> <!-- playlist grid -->
-    <div class="form-group col-12 col-lg-4 col-xl-3">
+  <div class="row"> <!-- playlist grid -->
+    <div class="col-12 col-lg-4 col-xl-3">
       <div *ngIf="isCreation()" class="video-playlist-title" i18n>NEW PLAYLIST</div>
       <div *ngIf="!isCreation() && videoPlaylistToUpdate" class="video-playlist-title" i18n>PLAYLIST</div>
     </div>
 
-    <div class="form-group col-12 col-lg-8 col-xl-9">
+    <div class="col-12 col-lg-8 col-xl-9">
 
       <div class="col-md-12 col-xl-6">
         <div class="form-group">
@@ -88,7 +88,7 @@
         </div>
       </div>
 
-      <div class="form-row"> <!-- submit placement block -->
+      <div class="row"> <!-- submit placement block -->
         <div class="col-md-7 col-xl-5"></div>
         <div class="col-md-5 col-xl-5 d-inline-flex">
           <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid">
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
index 25b742bff..0091f70be 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html
@@ -1,6 +1,7 @@
 <h1>
   <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My playlists</ng-container> <span class="badge badge-secondary">{{ pagination.totalItems }}</span>
+  <ng-container i18n>My playlists</ng-container>
+  <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary">{{ pagination.totalItems }}</span>
 </h1>
 
 <my-channels-setup-message></my-channels-setup-message>
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
index 955fd4884..56ff0e788 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.html
@@ -17,7 +17,7 @@
   </div>
 
   <div class="modal-footer">
-    <div class="form-group inputs">
+    <div class="inputs">
       <input
         type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
         (click)="dismiss()" (key.enter)="dismiss()"
diff --git a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
index 0eb694162..48c073192 100644
--- a/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
+++ b/client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss
@@ -4,7 +4,3 @@
 p-autocomplete {
   display: block;
 }
-
-.form-group {
-  margin: 20px 0;
-}
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 7f12e2c71..146dcf41e 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -2,7 +2,7 @@
   <span>
     <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
     <ng-container i18n>My videos</ng-container>
-    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+    <span *ngIf="pagination.totalItems" class="pt-badge badge-secondary"> {{ pagination.totalItems }}</span>
   </span>
 
   <div>
diff --git a/client/src/app/+page-not-found/page-not-found.component.html b/client/src/app/+page-not-found/page-not-found.component.html
index 0333f9550..70ede26e8 100644
--- a/client/src/app/+page-not-found/page-not-found.component.html
+++ b/client/src/app/+page-not-found/page-not-found.component.html
@@ -1,7 +1,7 @@
 <div class="root">
   <div *ngIf="status !== 403 && status !== 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted" i18n>That's an error.</span>
+    <span class="ms-1 muted" i18n>That's an error.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>We couldn't find any video tied to the URL {{ pathname }} you were looking for.</ng-container>
@@ -24,7 +24,7 @@
 
   <div *ngIf="status === 403" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted" i18n>You are not authorized here.</span>
+    <span class="ms-1 muted" i18n>You are not authorized here.</span>
 
     <div class="text mt-4">
       <ng-container *ngIf="type === 'video'" i18n>You might need to check your account is allowed by the video or instance owner.</ng-container>
@@ -34,7 +34,7 @@
 
   <div *ngIf="status === 418" class="box">
     <strong>{{ status }}.</strong>
-    <span class="ml-1 muted">I'm a teapot.</span>
+    <span class="ms-1 muted">I'm a teapot.</span>
 
     <div class="text mt-4" i18n="Description of a tea flavour, keeping the 'requested entity body' as a technical expression referring to a web request">
       The requested entity body blends sweet bits with a mellow earthiness.
diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html
index c4861e8c4..5bce009d5 100644
--- a/client/src/app/+search/search-filters.component.html
+++ b/client/src/app/+search/search-filters.component.html
@@ -77,7 +77,7 @@
         </div>
 
         <div class="row">
-          <div class="pl-0 col-sm-6">
+          <div class="ps-0 col-sm-6">
             <input
               (change)="onDurationOrPublishedUpdated()"
               (keydown.enter)="$event.preventDefault()"
@@ -87,7 +87,7 @@
               class="form-control"
             >
           </div>
-          <div class="pr-0 col-sm-6">
+          <div class="pe-0 col-sm-6">
             <input
               (change)="onDurationOrPublishedUpdated()"
               (keydown.enter)="$event.preventDefault()"
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss
index ece4ba5b5..5fd1764d3 100644
--- a/client/src/app/+search/search-filters.component.scss
+++ b/client/src/app/+search/search-filters.component.scss
@@ -22,10 +22,6 @@ form {
   margin-bottom: 1rem;
 }
 
-.form-group {
-  margin-bottom: 25px;
-}
-
 input[type=text] {
   @include peertube-input-text(100%);
   display: block;
diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 2c84dd930..247dfb56a 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -2,22 +2,22 @@
   <div class="results-header">
     <div class="first-line">
       <div class="results-counter" *ngIf="pagination.totalItems">
-        <span class="mr-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
+        <span class="me-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>
 
-        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
-        <span class="mr-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
+        <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'local'">on this instance</span>
+        <span class="me-1" i18n *ngIf="advancedSearch.searchTarget === 'search-index'">on the vidiverse</span>
 
         <span *ngIf="currentSearch" i18n>for <span class="search-value">{{ currentSearch }}</span></span>
       </div>
 
       <div
-        class="results-filter-button ml-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
+        class="results-filter-button ms-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed" role="button"
         [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="collapseBasic"
       >
         <span class="icon icon-filter"></span>
         <ng-container i18n>
           Filters
-          <span *ngIf="numberOfFilters() > 0" class="badge badge-secondary">{{ numberOfFilters() }}</span>
+          <span *ngIf="numberOfFilters() > 0" class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
         </ng-container>
       </div>
     </div>
diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
index aad2f31d3..a07e2fca3 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.html
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -6,7 +6,7 @@
         (click)="onClick(i)"
       >
         <div class="step-index">
-          <ng-container *ngIf="!isCompleted(step)"><span class="sr-only" i18n>Step</span> {{ i + 1 }}</ng-container>
+          <ng-container *ngIf="!isCompleted(step)"><span class="visually-hidden" i18n>Step</span> {{ i + 1 }}</ng-container>
           <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
         </div>
 
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
index 67f332409..888e3245d 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -34,9 +34,7 @@
         type="text" id="name" i18n-placeholder placeholder="Example: my_super_channel"
         formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
       >
-      <div class="input-group-append">
-        <span class="input-group-text">@{{ instanceHost }}</span>
-      </div>
+      <div class="input-group-text">@{{ instanceHost }}</div>
     </div>
 
     <div class="name-information" i18n>
diff --git a/client/src/app/+signup/+register/register-step-terms.component.html b/client/src/app/+signup/+register/register-step-terms.component.html
index 28a6e0021..717a289e6 100644
--- a/client/src/app/+signup/+register/register-step-terms.component.html
+++ b/client/src/app/+signup/+register/register-step-terms.component.html
@@ -1,8 +1,8 @@
 <form role="form" [formGroup]="form">
-  <div class="form-group form-group-terms">
+  <div class="form-group">
     <my-peertube-checkbox inputName="terms" formControlName="terms">
       <ng-template ptTemplate="label">
-        <ng-container i18n> 
+        <ng-container i18n>
           I am at least {{ minimumAge }} years old and agree
           to the <a class="terms-anchor" (click)="onTermsClick($event)" href='#'>Terms</a>
           <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index cab21c655..745b37c10 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -27,9 +27,7 @@
         type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
         formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
       >
-      <div class="input-group-append">
-        <span class="input-group-text">@{{ instanceHost }}</span>
-      </div>
+      <span class="input-group-text">@{{ instanceHost }}</span>
     </div>
 
     <div class="name-information" i18n>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 4be67a858..53093a81a 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -29,22 +29,6 @@
   }
 }
 
-.form-group-terms {
-  margin: 30px 0;
-}
-
-.input-group {
-  @include peertube-input-group(100%);
-}
-
-.input-group-append {
-  height: 30px;
-}
-
-.form-group-terms {
-  width: 100% !important;
-}
-
 input:not([type=submit]) {
   @include peertube-input-text(100%);
   display: block;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 5344e5431..7add71886 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -33,10 +33,6 @@ my-peertube-checkbox {
   height: 100%;
   min-height: 300px;
 
-  .form-group {
-    margin-bottom: 25px;
-  }
-
   input {
     @include peertube-input-text(100%);
     display: block;
@@ -45,10 +41,6 @@ my-peertube-checkbox {
   .label-tags + span {
     font-size: 15px;
   }
-
-  .advanced-settings .form-group {
-    margin-bottom: 20px;
-  }
 }
 
 .captions-header {
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 4376f6fe4..446406d1a 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -1,6 +1,6 @@
 <div class="margin-content">
   <div class="title-page title-page-single">
-    <span class="mr-1" i18n>Update</span>
+    <span class="me-1" i18n>Update</span>
     <a [routerLink]="getVideoUrl()">{{ video?.name }}</a>
   </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
index 3ee818c8b..95d117eec 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.html
@@ -2,7 +2,7 @@
   <div class="avatar-and-textarea">
     <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
 
-    <div class="form-group">
+    <div class="textarea-wrapper">
       <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
                 [readonly]="(user === null) ? true : false"
                 (click)="openVisitorModal($event)"
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index fb79991db..23e705507 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -17,9 +17,8 @@ form {
     @include margin-right(10px);
   }
 
-  .form-group {
+  .textarea-wrapper {
     flex-grow: 1;
-    margin: 0;
     position: relative;
   }
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
index 5014b9692..160865519 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment.component.html
@@ -16,7 +16,7 @@
                 {{ comment.account.displayName }}
               </span>
 
-              <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+              <span class="comment-account-fid ms-1">{{ comment.by }}</span>
             </a>
           </div>
 
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index 0e00c9c0e..a76379924 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -6,7 +6,7 @@
 
     <my-feed [syndicationItems]="syndicationItems"></my-feed>
 
-    <div ngbDropdown class="d-inline-block ml-4 dropdown-root">
+    <div ngbDropdown class="d-inline-block ms-4 dropdown-root">
       <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
         SORT BY
       </button>
@@ -80,7 +80,7 @@
 
             <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
 
-            <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader>
+            <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader>
           </div>
         </my-video-comment>
 
diff --git a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
index d579aaddb..b64d45564 100644
--- a/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
+++ b/client/src/app/+videos/+video-watch/shared/information/privacy-concerns.component.html
@@ -1,6 +1,6 @@
 <div class="privacy-concerns" *ngIf="display">
   <div class="privacy-concerns-text">
-    <span class="mr-2">
+    <span class="me-2">
       <strong i18n>Friendly Reminder: </strong>
       <ng-container i18n>
         the sharing system used for this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
index f5dd352a3..b04bd3548 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.html
@@ -6,9 +6,9 @@
     <div class="playlist-display-name">
       {{ playlist.displayName }}
 
-      <span *ngIf="isUnlistedPlaylist()" class="badge badge-warning" i18n>Unlisted</span>
-      <span *ngIf="isPrivatePlaylist()" class="badge badge-danger" i18n>Private</span>
-      <span *ngIf="isPublicPlaylist()" class="badge badge-info" i18n>Public</span>
+      <span *ngIf="isUnlistedPlaylist()" class="pt-badge badge-warning" i18n>Unlisted</span>
+      <span *ngIf="isPrivatePlaylist()" class="pt-badge badge-danger" i18n>Private</span>
+      <span *ngIf="isPublicPlaylist()" class="pt-badge badge-info" i18n>Public</span>
     </div>
 
     <div class="playlist-by-index">
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
index 5c3453e4b..0f0ac1979 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.scss
@@ -15,43 +15,47 @@
   .playlist-info {
     padding: 5px 30px;
     background-color: pvar(--greyBackgroundColor);
+  }
+
+  .playlist-display-name {
+    font-size: 18px;
+    font-weight: $font-semibold;
+    margin-bottom: 5px;
 
-    .playlist-display-name {
-      font-size: 18px;
-      font-weight: $font-semibold;
-      margin-bottom: 5px;
+    .pt-badge {
+      @include margin-left(5px);
     }
+  }
 
-    .playlist-by-index {
-      color: pvar(--greyForegroundColor);
-      display: flex;
+  .playlist-by-index {
+    color: pvar(--greyForegroundColor);
+    display: flex;
 
-      .playlist-by {
-        @include margin-right(5px);
-      }
+    .playlist-by {
+      @include margin-right(5px);
+    }
 
-      .playlist-index span:first-child::after {
-        content: '/';
-        margin: 0 3px;
-      }
+    .playlist-index span:first-child::after {
+      content: '/';
+      margin: 0 3px;
     }
+  }
 
-    .playlist-controls {
-      display: flex;
-      margin: 10px 0;
+  .playlist-controls {
+    display: flex;
+    margin: 10px 0;
 
-      my-global-icon:not(:last-child) {
-        @include margin-right(.5rem);
-      }
+    my-global-icon:not(:last-child) {
+      @include margin-right(.5rem);
+    }
 
-      my-global-icon {
-        &:not(.active) {
-          opacity: .5;
-        }
+    my-global-icon {
+      &:not(.active) {
+        opacity: .5;
+      }
 
-        ::ng-deep {
-          cursor: pointer;
-        }
+      ::ng-deep {
+        cursor: pointer;
       }
     }
   }
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 1ea0cf6b8..461891779 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -61,7 +61,7 @@
             <div class="video-info-channel-left d-flex">
               <my-video-avatar-channel [video]="video" [showChannel]="!isChannelDisplayNameGeneric()"></my-video-avatar-channel>
 
-              <div class="video-info-channel-left-links ml-1">
+              <div class="video-info-channel-left-links ms-1">
                 <ng-container *ngIf="!isChannelDisplayNameGeneric()">
                   <a [routerLink]="[ '/c', video.byVideoChannel ]" i18n-title title="Channel page">
                     {{ video.channel.displayName }}
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.html b/client/src/app/+videos/video-list/overview/video-overview.component.html
index f250c2407..1d5131092 100644
--- a/client/src/app/+videos/video-list/overview/video-overview.component.html
+++ b/client/src/app/+videos/video-list/overview/video-overview.component.html
@@ -1,4 +1,4 @@
-<h1 class="sr-only" i18n>Discover</h1>
+<h1 class="visually-hidden" i18n>Discover</h1>
 <div class="margin-content">
 
   <div class="no-results" i18n *ngIf="notResults">No results.</div>
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
index 7a9b6c51f..d08e2f0fb 100644
--- a/client/src/app/header/search-typeahead.component.html
+++ b/client/src/app/header/search-typeahead.component.html
@@ -25,7 +25,7 @@
       <div class="d-flex justify-content-between">
         <label class="small-title" i18n>GLOBAL SEARCH</label>
         <div class="advanced-search-status muted">
-          <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
+          <span *ngIf="serverConfig" class="me-1" i18n>using {{ serverConfig.search.searchIndex.url }}</span>
           <i class="glyphicon glyphicon-globe"></i>
         </div>
       </div>
@@ -39,8 +39,8 @@
         <label class="small-title" i18n>ADVANCED SEARCH</label>
         <div class="advanced-search-status c-help">
           <span [ngClass]="canSearchAnyURI ? 'text-success' : 'muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
-            <span *ngIf="canSearchAnyURI()" class="mr-1" i18n>any instance</span>
-            <span *ngIf="!canSearchAnyURI()" class="mr-1" i18n>only followed instances</span>
+            <span *ngIf="canSearchAnyURI()" class="me-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI()" class="me-1" i18n>only followed instances</span>
             <i [ngClass]="canSearchAnyURI() ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
           </span>
         </div>
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
index 4ac9809e1..3f85ed6ae 100644
--- a/client/src/app/header/suggestion.component.html
+++ b/client/src/app/header/suggestion.component.html
@@ -1,16 +1,16 @@
 <a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
-  <div class="flex-shrink-0 mr-2 text-center">
+  <div class="flex-shrink-0 me-2 text-center">
     <my-global-icon iconName="search"></my-global-icon>
   </div>
 
-  <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
+  <img class="avatar me-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
 
   <div
-    class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"
+    class="flex-auto overflow-hidden text-start no-wrap css-truncate css-truncate-target"
     [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"
   ></div>
 
-  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
+  <div class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ms-1 f6">
     <span *ngIf="result.type === 'search-instance'" i18n>In this instance's network</span>
     <span *ngIf="result.type === 'search-index'" i18n>In the vidiverse</span>
   </div>
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index b8f8d68ab..2961daaa3 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -36,14 +36,14 @@
               >
                 <my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
                 <span i18n>Interface:</span>
-                <span class="ml-auto muted">{{ currentInterfaceLanguage }}</span>
+                <span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
                 #settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
                 <my-global-icon iconName="video-lang" aria-hidden="true"></my-global-icon>
                 <span i18n>Videos:</span>
-                <span class="ml-auto muted">{{ videoLanguages.join(', ') }}</span>
+                <span class="ms-auto muted">{{ videoLanguages.join(', ') }}</span>
               </a>
 
               <a ngbDropdownItem ngbDropdownToggle class="dropdown-item settings-sensitive" routerLink="/my-account/settings"
@@ -53,14 +53,14 @@
                 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy === 'display'" iconName="sensitive" aria-hidden="true"></my-global-icon>
                 <my-global-icon class="hover-display-toggle" [hidden]="user.nsfwPolicy !== 'display'" iconName="unsensitive" aria-hidden="true"></my-global-icon>
                 <span i18n>Sensitive:</span>
-                <span class="ml-auto muted">{{ nsfwPolicy }}</span>
+                <span class="ms-auto muted">{{ nsfwPolicy }}</span>
               </a>
 
               <a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
                 <my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
                 <ng-container i18n>Help share videos</ng-container>
 
-                <my-input-switch class="ml-auto" [checked]="user.p2pEnabled"></my-input-switch>
+                <my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
               </a>
 
               <div class="dropdown-divider"></div>
@@ -149,7 +149,7 @@
 
         <div class="footer-copyleft">
           <small class="d-inline" i18n-title title="powered by PeerTube - CopyLeft 2015-2022">
-            <a href="https://joinpeertube.org" class="mr-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
+            <a href="https://joinpeertube.org" class="me-1" target="_blank" rel="noopener noreferrer" i18n>powered by PeerTube</a>
 
             <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" target="_blank" rel="noopener noreferrer">
               <span aria-label="copyleft" class="d-inline-block" style="transform: rotateY(180deg)">&copy;</span> 2015-2022
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index beda1c43c..2bd11c6f7 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -24,7 +24,7 @@
       <div>
         <button
           *ngIf="unreadNotifications"
-          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok mr-2"
+          i18n-title title="Mark all as read" class="glyphicon glyphicon-ok me-2"
           (click)="markAllAsRead()"
         ></button>
         <a
@@ -45,7 +45,7 @@
     ></my-user-notifications>
 
     <a *ngIf="loaded" class="all-notifications" routerLink="/my-account/notifications" #notifications (click)="onNavigate(notifications)">
-      <my-global-icon class="mr-1" iconName="bell" aria-hidden="true"></my-global-icon>
+      <my-global-icon class="me-1" iconName="bell" aria-hidden="true"></my-global-icon>
       <span i18n>See all your notifications</span>
     </a>
   </div>
diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index f07501726..c59c25770 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -9,7 +9,7 @@
   <div class="modal-body" >
     <div [innerHtml]="message"></div>
 
-    <div *ngIf="inputLabel && expectedInputValue" class="form-group">
+    <div *ngIf="inputLabel && expectedInputValue" class="form-group mt-3">
       <label for="confirmInput">{{ inputLabel }}</label>
       <input type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" />
     </div>
diff --git a/client/src/app/modal/confirm.component.scss b/client/src/app/modal/confirm.component.scss
index 77ea4d307..21aa81eeb 100644
--- a/client/src/app/modal/confirm.component.scss
+++ b/client/src/app/modal/confirm.component.scss
@@ -13,7 +13,3 @@ input[type=text] {
   @include peertube-input-text(100%);
   display: block;
 }
-
-.form-group {
-  margin: 20px 0;
-}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 986de15ed..bb87279d7 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -17,9 +17,9 @@
         </a>
 
         <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
         </a>
       </span>
     </div>
@@ -37,9 +37,9 @@
         </a>
 
         <a *ngIf="isAdminView" [routerLink]="[ '.' ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
-          class="ml-auto muted abuse-details-links" i18n
+          class="ms-auto muted abuse-details-links" i18n
         >
-          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ms-1 glyphicon glyphicon-flag"></span>
         </a>
       </span>
     </div>
@@ -53,7 +53,7 @@
     <div class="mt-3 d-flex">
       <span class="moderation-expanded-label">
         <ng-container i18n>Report</ng-container>
-        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 muted">#{{ abuse.id }}</a>
+        <a [routerLink]="[ '.' ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ms-1 muted">#{{ abuse.id }}</a>
       </span>
       <span class="moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
     </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index f0a27c6e2..6d1de808d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -8,7 +8,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index e9c5fadcf..b63bf1f92 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -6,7 +6,7 @@
 
       <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
         <my-global-icon iconName="upload"></my-global-icon>
-        <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
+        <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
         <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
       </div>
 
@@ -15,7 +15,7 @@
         #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-image-info" autoClose="outside" placement="right"
       >
         <my-global-icon iconName="edit"></my-global-icon>
-        <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
+        <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
       </div>
 
     </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index cc5e36a32..a50a2bb0e 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -3,37 +3,37 @@
 
 .actor {
   display: flex;
+}
 
-  my-actor-avatar {
-    @include margin-right(15px);
-  }
+my-actor-avatar {
+  @include margin-right(15px);
+}
+
+.actor-info {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.actor-info-display-name {
+  font-size: 20px;
+  font-weight: $font-bold;
 
-  .actor-info {
-    display: inline-flex;
-    flex-direction: column;
-
-    .actor-info-display-name {
-      font-size: 20px;
-      font-weight: $font-bold;
-
-      @media screen and (max-width: $small-view) {
-        font-size: 16px;
-      }
-    }
-
-    .actor-info-username {
-      position: relative;
-      font-size: 14px;
-      color: pvar(--greyForegroundColor);
-    }
-
-    .actor-info-followers {
-      font-size: 15px;
-      padding-bottom: .5rem;
-    }
+  @media screen and (max-width: $small-view) {
+    font-size: 16px;
   }
 }
 
+.actor-info-username {
+  position: relative;
+  font-size: 14px;
+  color: pvar(--greyForegroundColor);
+}
+
+.actor-info-followers {
+  font-size: 15px;
+  padding-bottom: .5rem;
+}
+
 .actor-img-edit-container {
   position: relative;
   width: 0;
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
index 7031cb53b..1d6b3df7e 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html
@@ -1,6 +1,7 @@
-<div class="input-group has-feedback has-clear">
-  <div *ngIf="hasFilters()" class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
-    <div class="input-group-text" ngbDropdownToggle>
+<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
+
+  <ng-container *ngIf="hasFilters()">
+    <div class="input-group-text c-hand" ngbDropdownToggle>
       <span class="caret" aria-haspopup="menu" role="button"></span>
     </div>
 
@@ -15,14 +16,14 @@
         </button>
       </ng-container>
     </div>
-  </div>
+  </ng-container>
 
   <input
     type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+    class="last-in-group"
     [(ngModel)]="searchValue"
     (keyup)="onInputSearch($event)"
   >
 
-  <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetTableFilter()"></a>
-  <span class="sr-only" i18n>Clear filters</span>
+  <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></a>
 </div>
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index ee1b3b508..ed85385fd 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -23,7 +23,6 @@ my-global-icon {
   width: 18px;
   height: 18px;
 
-
   &.no-visible {
     @include margin-right($size + $margin);
 
diff --git a/client/src/app/shared/shared-forms/input-switch.component.html b/client/src/app/shared/shared-forms/input-switch.component.html
index ce1dee470..9a466055a 100644
--- a/client/src/app/shared/shared-forms/input-switch.component.html
+++ b/client/src/app/shared/shared-forms/input-switch.component.html
@@ -1,4 +1,4 @@
 <div (click)="update()">
   <input type="checkbox" [checked]="checked"/>
-  <label class="ml-auto">Toggle</label>
+  <label class="ms-auto">Toggle</label>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index dfe646d2f..e5edb6c97 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -1,21 +1,19 @@
-<div class="input-group input-group-sm">
+<div class="input-group">
   <input
     [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
     [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
   />
 
-  <div *ngIf="withToggle || withCopy" class="input-group-append">
-    <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
-      <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
-    </button>
+  <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary eye-button" [title]="toggleTitle">
+    <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
+  </button>
 
-    <button
-      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-      class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
-    >
-      <span class="glyphicon glyphicon-duplicate"></span>
-      Copy
-    </button>
-  </div>
+  <button
+    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  >
+    <span class="glyphicon glyphicon-duplicate"></span>
+    <span class="copy-text">Copy</span>
+  </button>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index b5a71eddd..02a8d7d0e 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -5,11 +5,14 @@ input {
   @include peertube-input-text(auto);
   @include padding-left(15px !important);
   @include padding-right(15px !important);
+}
 
-  // set again properties of peertube-input-text that are overridden by .input-group
-  font-size: 15px !important;
+.btn {
+  font-size: 15px;
 }
 
-.eye-button {
-  line-height: 1 !important;
+.copy-text {
+  font-size: 14px;
+  margin-left: 5px;
+  vertical-align: top;
 }
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index c679e1403..38a48a2a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -1,6 +1,6 @@
 <div class="root flex-column">
   <div class="d-flex">
-    <label class="form-group-checkbox">
+    <label>
       <input
         type="checkbox"
         [(ngModel)]="checked"
@@ -33,7 +33,7 @@
     <div *ngIf="recommended" class="recommended" i18n>Recommended</div>
   </div>
 
-  <div class="ml-4 d-flex flex-column">
+  <div class="ms-4 d-flex flex-column">
     <small class="wrapper mt-2 muted">
       <ng-content select="description"></ng-content>
     </small>
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
index 4e384e7e0..5fe20c3a5 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss
@@ -4,7 +4,7 @@
 .root {
   display: flex;
 
-  .form-group-checkbox {
+  label {
     display: flex;
     align-items: center;
 
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index f83f17a16..b49fd36fa 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,7 +7,7 @@
   [searchable]="searchable"
 >
   <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
+    <img alt="" class="avatar me-1" [src]="channel.avatarPath" />
     {{ channel.label }}
   </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.html b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
index 03db2875b..2799ccdcc 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.html
@@ -22,7 +22,7 @@
 >
 
   <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.group }}</span>
@@ -30,7 +30,7 @@
   </ng-template>
 
   <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
-    <div class="form-group-checkbox">
+    <div class="checkbox-wrapper">
       <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected"/>
       <span role="checkbox" [attr.aria-checked]="item$.selected"></span>
       <span>{{ item.label }}</span>
diff --git a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
index d47c4f9da..892f22dff 100644
--- a/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
+++ b/client/src/app/shared/shared-forms/select/select-checkbox.component.scss
@@ -7,7 +7,7 @@ ng-select ::ng-deep {
     align-items: center;
   }
 
-  .form-group-checkbox {
+  .checkbox-wrapper {
     display: flex;
     align-items: center;
 
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
index be6099a97..8e5dfb064 100644
--- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
+++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss
@@ -16,26 +16,3 @@
   font-size: 15px;
   margin-bottom: 15px;
 }
-
-ngb-accordion ::ng-deep {
-  .card {
-    border-color: var(--mainBackgroundColor);
-
-    .card-header {
-      background-color: unset;
-      padding: 0;
-
-      + .collapse.show {
-        background-color: var(--submenuBackgroundColor);
-      }
-    }
-  }
-
-  .btn {
-    @include peertube-button;
-    @include grey-button;
-
-    border-radius: unset;
-    width: 100%;
-  }
-}
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.html b/client/src/app/shared/shared-instance/instance-features-table.component.html
index 1fdef95ff..761243bfe 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.html
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.html
@@ -1,6 +1,6 @@
 <div *ngIf="serverConfig" class="feature-table">
 
-  <table class="table" *ngIf="serverConfig">
+  <table *ngIf="serverConfig">
     <caption i18n>Features found on this instance</caption>
     <tr>
       <th i18n class="label" scope="row">PeerTube version</th>
diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss
index 56ca105f4..105a7681f 100644
--- a/client/src/app/shared/shared-instance/instance-features-table.component.scss
+++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss
@@ -4,6 +4,7 @@
 table {
   font-size: 14px;
   color: pvar(--mainForegroundColor);
+  width: 100%;
 
   .label,
   .sub-label {
@@ -24,8 +25,10 @@ table {
     }
   }
 
+  th,
   td {
-    vertical-align: middle;
+    padding: 0.75rem;
+    border-top: 1px solid #dee2e6;
   }
 
   caption {
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
index 1e2f6c6a9..11f5a1ab0 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html
@@ -1,5 +1,5 @@
 <div class="root">
-  <div class="input-group has-feedback has-clear">
+  <div class="input-group has-clear">
     <input
       #ref
       type="text"
@@ -10,8 +10,7 @@
       [placeholder]="placeholder"
     >
 
-    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="onResetFilter()"></a>
-    <span class="sr-only" i18n>Clear filters</span>
+    <a class="glyphicon glyphicon-remove-sign form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></a>
   </div>
 
   <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.html b/client/src/app/shared/shared-moderation/account-block-badges.component.html
index feac707c2..fd3709676 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.html
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.html
@@ -1,4 +1,4 @@
-<span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
-<span *ngIf="account.mutedServerByUser" class="badge badge-danger" i18n>Instance muted</span>
-<span *ngIf="account.mutedByInstance" class="badge badge-danger" i18n>Muted by your instance</span>
-<span *ngIf="account.mutedServerByInstance" class="badge badge-danger" i18n>Instance muted by your instance</span>
+<span *ngIf="account.mutedByUser" class="pt-badge badge-danger" i18n>Muted</span>
+<span *ngIf="account.mutedServerByUser" class="pt-badge badge-danger" i18n>Instance muted</span>
+<span *ngIf="account.mutedByInstance" class="pt-badge badge-danger" i18n>Muted by your instance</span>
+<span *ngIf="account.mutedServerByInstance" class="pt-badge badge-danger" i18n>Instance muted by your instance</span>
diff --git a/client/src/app/shared/shared-moderation/account-block-badges.component.scss b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
index ccc3666aa..301d8305e 100644
--- a/client/src/app/shared/shared-moderation/account-block-badges.component.scss
+++ b/client/src/app/shared/shared-moderation/account-block-badges.component.scss
@@ -1,9 +1,8 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.badge {
+.pt-badge {
   @include margin-right(10px);
 
-  height: fit-content;
   font-size: 12px;
 }
diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html
index a4f81d824..15632f654 100644
--- a/client/src/app/shared/shared-moderation/account-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html
@@ -11,7 +11,7 @@
 >
   <ng-template pTemplate="caption">
     <div class="caption">
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.html b/client/src/app/shared/shared-moderation/report-modals/report.component.html
index 6c99180ef..8e0b0993c 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.html
@@ -8,11 +8,11 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-5">
 
           <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <div class="ml-2 mt-2 d-flex flex-column">
+          <div class="ms-2 mt-2 d-flex flex-column">
             <ng-container formGroupName="predefinedReasons">
 
               <div class="form-group" *ngFor="let reason of predefinedReasons">
@@ -29,7 +29,6 @@
 
             </ng-container>
           </div>
-
       </div>
 
       <div class="col-7">
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index afac108fc..51ca0b9d6 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -8,38 +8,32 @@
     <form novalidate [formGroup]="form" (ngSubmit)="report()">
 
     <div class="row">
-      <div class="col-5 form-group">
+      <div class="col-12 col-md-5">
+        <label i18n for="reportPredefinedReasons">What is the issue?</label>
 
-          <label i18n for="reportPredefinedReasons">What is the issue?</label>
+        <div class="ms-2 mt-2 d-flex flex-column">
+          <ng-container formGroupName="predefinedReasons">
 
-          <div class="ml-2 mt-2 d-flex flex-column">
-            <ng-container formGroupName="predefinedReasons">
+            <div class="form-group" *ngFor="let reason of predefinedReasons">
+              <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
+                <ng-template *ngIf="reason.help" ptTemplate="help">
+                  <div [innerHTML]="reason.help"></div>
+                </ng-template>
 
-              <div class="form-group" *ngFor="let reason of predefinedReasons">
-                <my-peertube-checkbox [inputName]="reason.id" [formControlName]="reason.id" [labelText]="reason.label">
-                  <ng-template *ngIf="reason.help" ptTemplate="help">
-                    <div [innerHTML]="reason.help"></div>
-                  </ng-template>
-
-                  <ng-container *ngIf="reason.description" ngProjectAs="description">
-                    <div [innerHTML]="reason.description"></div>
-                  </ng-container>
-                </my-peertube-checkbox>
-              </div>
-
-            </ng-container>
-          </div>
+                <ng-container *ngIf="reason.description" ngProjectAs="description">
+                  <div [innerHTML]="reason.description"></div>
+                </ng-container>
+              </my-peertube-checkbox>
+            </div>
 
+          </ng-container>
+        </div>
       </div>
 
-      <div class="col-7">
-        <div class="row justify-content-center">
-          <div class="col-12 col-lg-9 mb-2">
-            <my-embed [video]="video"></my-embed>
-          </div>
-        </div>
+      <div class="col-12 col-md-7">
+        <my-embed [video]="video"></my-embed>
 
-        <div class="mb-1 start-at" formGroupName="timestamp">
+        <div class="mb-1 mt-3 start-at" formGroupName="timestamp">
           <my-peertube-checkbox
             formControlName="hasStart"
             i18n-labelText labelText="Start at"
diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html
index 1a320e9a4..ba4336e2e 100644
--- a/client/src/app/shared/shared-moderation/server-blocklist.component.html
+++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html
@@ -19,7 +19,7 @@
         </a>
       </div>
 
-      <div class="ml-auto">
+      <div class="ms-auto">
         <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index 67ca56516..a6b8576a1 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -171,9 +171,8 @@
             </div>
           </div>
 
-          <div class="form-group">
+          <div class="form-group" *ngIf="isInVideoEmbedTab()">
             <my-peertube-checkbox
-              *ngIf="isInVideoEmbedTab()"
               inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
               i18n-labelText labelText="Only display embed URL"
             ></my-peertube-checkbox>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss
index 44ebb13f4..abb78b09b 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.scss
+++ b/client/src/app/shared/shared-share-modal/video-share.component.scss
@@ -55,13 +55,6 @@ my-input-toggle-hidden {
     }
   }
 
-  .form-group {
-    margin-bottom: 0;
-    height: 34px;
-    display: flex;
-    align-items: center;
-  }
-
   .video-caption-block {
     display: flex;
     align-items: center;
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
index 836972a33..ccd7f8f4b 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html
@@ -1,5 +1,5 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
-  <div class="form-group form-group-select">
+  <div class="form-group">
     <div class="anchor" id="video-sensitive-content-policy"></div> <!-- video-sensitive-content-policy anchor -->
     <label i18n for="nsfwPolicy">Default policy on videos containing sensitive content</label>
     <my-help>
@@ -20,7 +20,7 @@
     </div>
   </div>
 
-  <div class="form-group form-group-select">
+  <div class="form-group">
     <div class="anchor" id="video-languages-subtitles"></div> <!-- video-languages-subtitles anchor -->
     <label i18n for="videoLanguages">Only display videos in the following languages/subtitles</label>
     <my-help>
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index c4f6020d4..a39e7cf1f 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -15,8 +15,6 @@ input[type=submit] {
 
 .peertube-select-container {
   @include peertube-select-container(340px);
-
-  margin-bottom: 30px;
 }
 
 my-select-languages {
@@ -24,7 +22,3 @@ my-select-languages {
 
   display: block;
 }
-
-.form-group-select {
-  margin-bottom: 30px;
-}
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
index a00c3d1c7..656d1beb3 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.html
@@ -1,5 +1,5 @@
 <form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
-  <div class="form-group mb-2">
+  <div class="form-group">
     <input type="email"
       formControlName="text"
       class="form-control"
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index 01e305938..28396915a 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -7,8 +7,8 @@
 
   <div class="modal-body" *ngIf="live">
     <div>
-      <div class="badge badge-info" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
-      <div class="badge badge-info" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
+      <div class="pt-badge badge-blue" *ngIf="live.permanentLive" i18n>Permanent/Recurring live</div>
+      <div class="pt-badge badge-blue" *ngIf="live.saveReplay" i18n>Replay will be saved</div>
     </div>
 
     <div class="alert alert-info">
@@ -36,8 +36,8 @@
       <label i18n>Latest live sessions</label>
 
       <div class="journal-session" *ngFor="let session of latestLiveSessions">
-        <span i18n class="badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
-        <span class="badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
+        <span i18n class="pt-badge badge-success" *ngIf="!getErrorLabel(session)">Success</span>
+        <span class="pt-badge badge-danger" *ngIf="getErrorLabel(session)">{{ getErrorLabel(session) }}</span>
 
         <span i18n>Started on {{ session.startDate | date:'medium' }}</span>
         <span i18n *ngIf="session.endDate">Ended on {{ session.endDate | date:'medium' }}</span>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.scss b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
index 9c8ad12bd..fc0b1cea2 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.scss
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.scss
@@ -13,15 +13,16 @@ p-autocomplete {
   margin: 1rem 0;
 }
 
-.badge {
+.pt-badge {
+  @include margin-right(5px);
+
   font-size: 13px;
-  margin-right: 5px;
 }
 
 .journal-session {
   margin-bottom: 5px;
 
-  span:not(.badge, :last-child)::after {
+  span:not(.pt-badge, :last-child)::after {
     margin: 3px;
     content: '•';
   }
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index b50544057..9123d2a5a 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,14 +28,15 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
+              <div class="input-group">
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
+
+                <button
+                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
+                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
+                >
+                  <span class="glyphicon glyphicon-duplicate"></span>
+                </button>
               </div>
             </div>
           </ng-template>
@@ -53,13 +54,15 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group input-group-sm">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
-                <div class="input-group-append" *ngIf="!isConfidentialVideo()">
-                  <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
-                    <span class="glyphicon glyphicon-duplicate"></span>
-                  </button>
-                </div>
+              <div class="input-group">
+                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
+
+                <button
+                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
+                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
+                >
+                  <span class="glyphicon glyphicon-duplicate"></span>
+                </button>
               </div>
             </div>
           </ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index bd42f4813..04d5eb560 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -5,6 +5,13 @@
   margin-top: 30px;
 }
 
+.input-group > input {
+  @include peertube-input-text(auto);
+
+  font-size: 14px;
+  padding: 0 5px;
+}
+
 .advanced-filters-button {
   display: flex;
   justify-content: center;
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.html b/client/src/app/shared/shared-video-miniature/videos-list.component.html
index 2b554517f..c220f61f1 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.html
@@ -12,15 +12,15 @@
 
     <div class="action-block">
       <ng-container *ngFor="let action of headerActions">
-        <a *ngIf="action.routerLink" class="ml-2" [routerLink]="action.routerLink" routerLinkActive="active">
+        <a *ngIf="action.routerLink" class="ms-2" [routerLink]="action.routerLink" routerLinkActive="active">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && !action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)">
+        <a *ngIf="!action.routerLink && !action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
-        <a *ngIf="!action.routerLink && action.href && action.click" class="ml-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
+        <a *ngIf="!action.routerLink && action.href && action.click" class="ms-2" (click)="action.click($event)" (key.enter)="action.click($event)" [href]="action.href">
           <ng-container *ngTemplateOutlet="actionContent; context:{ $implicit: action }"></ng-container>
         </a>
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index 2400a4c25..f58d5f7f6 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -21,7 +21,7 @@
             [attr.title]="playlistElement.video.name"
           >{{ playlistElement.video.name }}</a>
 
-          <span *ngIf="isVideoPrivate()" class="badge badge-yellow">Private</span>
+          <span *ngIf="isVideoPrivate()" class="pt-badge badge-yellow">Private</span>
         </div>
 
         <span class="video-miniature-created-at-views">
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index fbf67e892..c0cf2d1da 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -91,9 +91,8 @@ my-video-thumbnail,
           padding-right: 5px;
         }
 
-        .badge {
-          @include peertube-badge;
-          margin-right: 5px;
+        .pt-badge {
+          @include margin-right(5px);
         }
       }
 
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 99566acb6..b5b05a3c4 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -96,6 +96,10 @@ noscript,
   margin: 1rem auto;
 }
 
+a {
+  text-decoration: none;
+}
+
 strong {
   font-weight: $font-semibold;
 }
@@ -120,6 +124,7 @@ button {
 label {
   font-weight: $font-bold;
   font-size: 15px;
+  margin-bottom: 0.5rem;
 }
 
 code {
@@ -133,6 +138,10 @@ code {
   vertical-align: middle;
 }
 
+.form-group {
+  margin-bottom: 1rem;
+}
+
 .form-error,
 .form-warning {
   display: block;
@@ -154,14 +163,6 @@ my-input-toggle-hidden ::ng-deep input {
   max-width: initial;
 }
 
-.glyphicon-black {
-  color: #000;
-}
-
-.row {
-  margin: 0 !important;
-}
-
 .main-col {
   @include margin-left($menu-width);
 
@@ -326,6 +327,29 @@ table {
   margin-top: 10px;
 }
 
+.callout {
+  padding: 1.25rem;
+  border: 1px solid #eee;
+  border-radius: .25rem;
+  position: relative;
+
+  > label {
+    position: relative;
+    top: -5px;
+    left: -10px;
+    color: #6c757d !important;
+  }
+
+  &:not(.callout-light) {
+    border-left-width: .25rem;
+  }
+
+  &.callout-info {
+    border-color: pvar(--mainColorLightest);
+    border-left-color: pvar(--mainColor);
+  }
+}
+
 @media screen and (max-width: #{breakpoint(xxl)}) {
   .main-col {
     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index bc37134dd..2df2d0680 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -7,27 +7,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
-
 @import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/utilities';
+
 @import '~bootstrap/scss/root';
 @import '~bootstrap/scss/reboot';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/grid';
-@import '~bootstrap/scss/tables';
 @import '~bootstrap/scss/forms';
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/dropdown';
 @import '~bootstrap/scss/button-group';
-@import '~bootstrap/scss/input-group';
 @import '~bootstrap/scss/nav';
 @import '~bootstrap/scss/card';
-@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/accordion';
 @import '~bootstrap/scss/alert';
 @import '~bootstrap/scss/close';
 @import '~bootstrap/scss/modal';
 @import '~bootstrap/scss/tooltip';
 @import '~bootstrap/scss/popover';
-@import '~bootstrap/scss/utilities';
+
+@import '~bootstrap/scss/helpers';
+@import '~bootstrap/scss/utilities/api';
 
 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
 
@@ -36,16 +37,12 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   animation: spin 0.7s infinite linear;
 }
 
-.glyphicon-duplicate {
-  font-size: 70%;
-}
-
 .flex-auto {
   flex: auto;
 }
 
 .c-hand {
-  cursor: pointer;
+  cursor: pointer !important;
 }
 
 @keyframes spin {
@@ -58,16 +55,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 }
 
-.btn-group > .btn:not(:first-child) {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
 .dropdown-menu {
-  border-radius: 3px;
-  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   font-size: 15px;
-
   color: pvar(--mainForegroundColor);
   background-color: pvar(--mainBackgroundColor);
 
@@ -78,39 +67,22 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   .dropdown-item {
     padding: 3px 15px;
 
-    color: pvar(--mainForegroundColor);
-    background-color: pvar(--mainBackgroundColor);
-
     &.active {
       color: pvar(--mainBackgroundColor) !important;
       background-color: pvar(--mainHoverColor);
       opacity: 0.9;
     }
 
-    a:active,
-    &:hover {
-      color: pvar(--mainForegroundColor) !important;
-      background-color: pvar(--mainBackgroundHoverColor);
-    }
-
     &::after {
       display: none;
     }
   }
 
-  button {
-    @include disable-default-a-behaviour;
-  }
-
   a {
     @include disable-default-a-behaviour;
   }
 }
 
-.badge {
-  line-height: 1.1;
-}
-
 @media screen and (min-width: #{breakpoint(md)}) {
   .modal::before {
     vertical-align: middle;
@@ -350,22 +322,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .input-group {
-  > .form-control {
-    flex: initial;
+  > .btn,
+  > .input-group-text {
+    height: $button-height;
   }
 
-  input.form-control {
-    width: unset !important;
-    flex-grow: 1;
+  > .input-group-text {
+    font-size: 15px;
+    line-height: normal;
+    opacity: 0.9;
   }
 
-  .input-group-prepend + input {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
+  .input-group-text > .dropdown-toggle {
+    display: flex;
+  }
+
+  .last-in-group {
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
   }
 }
 
-.has-feedback.has-clear {
+.has-clear {
   position: relative;
 
   input {
@@ -374,11 +352,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .form-control-clear {
     color: rgba(0, 0, 0, 0.4);
-    /*
-     * Enable pointer events as they have been disabled since Bootstrap 3.3
-     * See https://github.com/twbs/bootstrap/pull/14104
-     */
-    pointer-events: all;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -397,44 +370,3 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     display: none;
   }
 }
-
-.callout {
-  padding: 1.25rem;
-  border: 1px solid #eee;
-  border-radius: .25rem;
-
-  > label {
-    position: relative;
-    top: -5px;
-    left: -10px;
-    color: #6c757d !important;
-  }
-
-  &:not(.callout-light) {
-    border-left-width: .25rem;
-  }
-
-  &.callout-info {
-    border-color: pvar(--mainColorLightest);
-    border-left-color: pvar(--mainColor);
-  }
-}
-
-// Override these properties for Bidi support
-@each $size, $length in $spacers {
-  .ml-#{$size} {
-    @include margin-left($length);
-  }
-
-  .mr-#{$size} {
-    @include margin-right($length);
-  }
-
-  .pl-#{$size} {
-    @include padding-left($length);
-  }
-
-  .pr-#{$size} {
-    @include padding-right($length);
-  }
-}
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss
index 90cdcf3ed..35bcfba4b 100644
--- a/client/src/sass/classes.scss
+++ b/client/src/sass/classes.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_badges' as *;
 
 .peertube-button {
   @include peertube-button;
@@ -32,3 +33,7 @@
 .muted {
   color: pvar(--greyForegroundColor) !important;
 }
+
+.pt-badge {
+  @include peertube-badge;
+}
diff --git a/client/src/sass/include/_badges.scss b/client/src/sass/include/_badges.scss
new file mode 100644
index 000000000..4bc70d4a9
--- /dev/null
+++ b/client/src/sass/include/_badges.scss
@@ -0,0 +1,61 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin peertube-badge {
+  display: inline-block;
+  border-radius: .25rem;
+  padding: .25em .4em;
+  font-size: 75%;
+  font-weight: $font-semibold;
+  line-height: 1.1;
+
+  &.badge-primary {
+    color: pvar(--mainBackgroundColor);
+    background-color: pvar(--mainColor);
+  }
+
+  &.badge-secondary {
+    color: pvar(--mainBackgroundColor);
+    background-color: pvar(--greyForegroundColor);
+    opacity: 0.7;
+  }
+
+  &.badge-banned,
+  &.badge-danger,
+  &.badge-red {
+    background-color: #ffcdd2;
+    color: #c63737;
+  }
+
+  &.badge-banned {
+    text-decoration: line-through;
+  }
+
+  &.badge-yellow,
+  &.badge-warning {
+    background-color: #feedaf;
+    color: #8a5340;
+  }
+
+  &.badge-brown {
+    background-color: #ffd8b2;
+    color: #805b36;
+  }
+
+  &.badge-green,
+  &.badge-success {
+    background-color: #c8e6c9;
+    color: #256029;
+  }
+
+  &.badge-blue,
+  &.badge-info {
+    background-color: #b3e5fc;
+    color: #23547b;
+  }
+
+  &.badge-purple {
+    background-color: #eccfff;
+    color: #694382;
+  }
+}
diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss
index 41a1448c4..c103e485a 100644
--- a/client/src/sass/include/_bootstrap-variables.scss
+++ b/client/src/sass/include/_bootstrap-variables.scss
@@ -1,4 +1,4 @@
-$dropdown-link-active-bg: inherit;
+@use '_variables' as *;
 
 $modal-footer-border-width: 0;
 $modal-md: 600px;
@@ -40,3 +40,11 @@ $input-focus-border-color: #ced4da;
 
 $nav-pills-link-active-bg: #F0F0F0;
 $nav-pills-link-active-color: #000;
+
+$dropdown-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+$dropdown-border-radius: 3px;
+$dropdown-link-active-color: pvar(--mainForegroundColor);
+$dropdown-link-active-bg: pvar(--mainBackgroundHoverColor);
+
+$accordion-button-active-bg: pvar(--mainColorLightest);
+$accordion-button-active-color: pvar(--mainForegroundColor);
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 8de23e64d..8545824e3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -89,6 +89,7 @@
   display: inline-block;
   height: $button-height;
   width: $width;
+  max-width: $width;
   color: pvar(--inputForegroundColor);
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
@@ -108,19 +109,6 @@
   }
 }
 
-@mixin peertube-input-group($width) {
-  width: $width;
-  min-height: $button-height;
-  padding-top: 0;
-  padding-bottom: 0;
-  flex-wrap: nowrap;
-
-  .input-group-text {
-    font-size: 14px;
-    color: #808080;
-  }
-}
-
 @mixin peertube-textarea ($width, $height) {
   @include peertube-input-text($width);
 
@@ -371,6 +359,7 @@
       cursor: default;
     }
   }
+
   select[disabled] {
     background-color: #f9f9f9;
   }
@@ -550,50 +539,6 @@
   }
 }
 
-@mixin peertube-badge {
-  border-radius: 2px;
-  padding: 1/4em 1/2em;
-  text-transform: uppercase;
-  font-weight: $font-bold;
-  font-size: 12px;
-  letter-spacing: 1/3px;
-
-  &.badge-banned,
-  &.badge-red {
-    background-color: #ffcdd2;
-    color: #c63737;
-  }
-
-  &.badge-banned {
-    text-decoration: line-through;
-  }
-
-  &.badge-yellow {
-    background-color: #feedaf;
-    color: #8a5340;
-  }
-
-  &.badge-brown {
-    background-color: #ffd8b2;
-    color: #805b36;
-  }
-
-  &.badge-green {
-    background-color: #c8e6c9;
-    color: #256029;
-  }
-
-  &.badge-blue {
-    background-color: #b3e5fc;
-    color: #23547b;
-  }
-
-  &.badge-purple {
-    background-color: #eccfff;
-    color: #694382;
-  }
-}
-
 @mixin actor-avatar-size ($size) {
   display: inline-block;
   width: $size;
@@ -937,8 +882,9 @@
       vertical-align: top;
     }
 
-    .badge {
+    .pt-badge {
       @include margin-left(7px);
+
       vertical-align: top;
     }
   }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index fd1b137dc..41ae60290 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '~bootstrap/scss/functions' as *;
 
 $small-view: 800px;
 $mobile-view: 500px;
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 79c878852..47b8adda4 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,3 +1,5 @@
+@use '~bootstrap/scss/functions' as *;
+
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9fc010d4f..a66e4485b 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -759,8 +759,9 @@ p-table {
     }
   }
 
-  .badge {
-    @include peertube-badge;
+  .pt-badge {
+    font-size: 12px;
+    text-transform: uppercase;
   }
 }
 
diff --git a/client/src/sass/z-index.scss b/client/src/sass/z-index.scss
index e46813dc3..c2c44b851 100644
--- a/client/src/sass/z-index.scss
+++ b/client/src/sass/z-index.scss
@@ -27,7 +27,6 @@ ngx-loading-bar {
 .btn-group,
 .dropdown-root,
 .action-dropdown,
-.input-group-prepend,
 .column-toggle {
   z-index: inherit !important;
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index 9a8be2b08..dcec7b636 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1461,10 +1461,10 @@
   resolved "https://registry.yarnpkg.com/@neos21/bootstrap3-glyphicons/-/bootstrap3-glyphicons-1.0.7.tgz#b3f62f0dc54b383afcc26d44fcb3bb0ca1bd4de2"
   integrity sha512-JfvPdx8W2+kVhW+8fj2kIJNS0tesU21hrWF7TBHtYDHpVfcFGU/yn3Eh02sJiNfZABkutP3oU0Ftw8LGF43Jng==
 
-"@ng-bootstrap/ng-bootstrap@^11.0.0":
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-11.0.0.tgz#16855620bff7ab7b965d4f49907c44b0f5bd5020"
-  integrity sha512-qDnB0+jbpQ4wjXpM4NPRAtwmgTDUCjGavoeRDZHOvFfYvx/MBf1RTjZEqTJ1Yqq1pKP4BWpzxCgVTunfnpmsjA==
+"@ng-bootstrap/ng-bootstrap@^12.1.2":
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz#19f21313234fe21090ba50a7721046ed5d9928e1"
+  integrity sha512-p27c+mYVdHiJMYrj5hwClVJxLdiZxafAqlbw1sdJh2xJ1rGOe+H/kCf5YDRbhlHqRN+34Gr0RQqIUeD1I2V8hg==
   dependencies:
     tslib "^2.3.0"
 
@@ -1669,6 +1669,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@popperjs/core@^2.11.5":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
 "@schematics/angular@13.3.0":
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/@schematics/angular/-/angular-13.3.0.tgz#c1a4d2ca25218d8cc7f220fc8323ba306bf7aa55"
@@ -3544,10 +3549,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.1.3:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.1.tgz#bc25380c2c14192374e8dec07cf01b2742d222a2"
-  integrity sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==
+bootstrap@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34"
+  integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-- 
cgit v1.2.3