From 4b0c16730b03916bcd036a8770cdf207c94575c9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 13 Oct 2026 20:27:11 +0200
Subject: [PATCH] Reduce size of Bootstrap stylesheet

---
 CHANGELOG.md                          |  1 +
 apps/client/src/styles/bootstrap.scss | 60 +++++++++++++++++++++++++++
 2 files changed, 61 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d05f916dfd..d1246ab4ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Reduced the size of the global stylesheet by removing the unused utilities of `bootstrap`
 - Upgraded `bootstrap` from version `4.6.2` to `5.3.8`
 
 ## 3.86.0 - 2026-10-13
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index 9eedbb60d0..2629b543b1 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -4,6 +4,8 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
+@use 'sass:map';
+
 // Configuration
 @import 'bootstrap/scss/functions';
 
@@ -28,6 +30,13 @@ $enable-rfs: false;
 $enable-smooth-scroll: false;
 $figure-caption-font-size: 90%;
 $green: #28a745;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
 $grid-gutter-width: 30px;
 $hr-opacity: 1;
 $initialism-font-size: 90%;
@@ -41,6 +50,57 @@ $table-cell-padding-y: 0.75rem;
 @import 'bootstrap/scss/mixins';
 @import 'bootstrap/scss/utilities';
 
+// Remove the utility groups that the app does not use
+$utilities: map.remove(
+  $utilities,
+  'align-content',
+  'bg-opacity',
+  'border-color',
+  'border-end',
+  'border-opacity',
+  'border-start',
+  'border-width',
+  'bottom',
+  'column-gap',
+  'end',
+  'flex',
+  'focus-ring',
+  'font-size',
+  'font-style',
+  'gap',
+  'gradient',
+  'line-height',
+  'link-offset',
+  'link-opacity',
+  'link-underline',
+  'link-underline-opacity',
+  'max-height',
+  'min-viewport-height',
+  'min-viewport-width',
+  'object-fit',
+  'opacity',
+  'order',
+  'overflow-y',
+  'pointer-events',
+  'rounded-bottom',
+  'rounded-end',
+  'rounded-start',
+  'rounded-top',
+  'row-gap',
+  'shadow',
+  'start',
+  'subtle-background-color',
+  'subtle-border-color',
+  'text-color',
+  'text-opacity',
+  'top',
+  'translate-middle',
+  'user-select',
+  'viewport-height',
+  'viewport-width',
+  'z-index'
+);
+
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';