一、用間距類別快速調整留白
製作網頁時，經常需要調整元素的外距和內距。Bootstrap 5 提供 m 和 p 兩組間距類別：
m：設定 margin
p：設定 padding
t、b：上方與下方
s、e：起始方向與結束方向
x、y：水平與垂直方向
例如：
<div class="mt-4 mb-3 px-4 py-2">
這個區塊具有上下與左右間距
</div>
mt-4 代表上方外距，mb-3 代表下方外距；px-4 會設定左右內距，py-2 則會設定上下內距。
如果只想在中型螢幕以上增加間距，可以加入響應式斷點：
<section class="p-3 p-md-5">
手機使用較小間距，平板與電腦使用較大間距
</section>
Bootstrap 也提供 gap 工具，可直接控制 Flexbox 或 Grid 項目之間的距離，不必為每一個子元素個別設定外距。
二、快速完成水平與垂直置中
Bootstrap 5 內建許多 Flexbox 工具類別。先加入 d-flex 建立彈性容器，再搭配 justify-content-center 和 align-items-center，便能完成水平與垂直置中。
<div
class="d-flex justify-content-center align-items-center"
style="min-height: 300px;"
>
<button class="btn btn-primary">置中的按鈕</button>
</div>
如果要讓多個項目平均分布，可以使用：
<div class="d-flex justify-content-between align-items-center">
<div>網站名稱</div>
<nav>導覽選單</nav>
<button class="btn btn-outline-primary">登入</button>
</div>
手機版需要改成垂直排列時，可以搭配響應式類別：
<div class="d-flex flex-column flex-md-row gap-3">
<div class="card">項目一</div>
<div class="card">項目二</div>
<div class="card">項目三</div>
</div>
這段程式在手機上會垂直排列，螢幕達到 md 斷點後則會改成水平排列。
三、在不同尺寸的螢幕顯示或隱藏內容
有些內容只適合在桌面版顯示，例如完整導覽列；手機版則可能需要改用簡化按鈕。Bootstrap 5 的顯示工具可以根據螢幕尺寸切換元素。
<div class="d-none d-md-block">
這段內容只會出現在平板與電腦版
</div>
<div class="d-block d-md-none">
這段內容只會出現在手機版
</div>
d-none 會先隱藏元素，d-md-block 則會在 md 以上恢復為區塊顯示。相反地，d-block d-md-none 會讓元素顯示在小螢幕，進入 md 斷點後隱藏。
這個方法也能應用在列印版面：
<button class="btn btn-primary d-print-none">
列印時隱藏這個按鈕
</button>
需要注意的是，不應該在桌面版和手機版各放一份完全相同的大量內容，否則會造成程式碼重複。顯示工具比較適合處理導覽、按鈕或輔助資訊。
四、使用 order 改變響應式排列順序
設計圖文區塊時，桌面版可能採用文字和圖片交錯排列，但手機版通常希望圖片先出現。此時不必修改 HTML 結構，可以使用 order 類別調整顯示順序。
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<h2>產品介紹</h2>
<p>這裡放置產品的特色與相關說明。</p>
</div>
<div class="col-md-6 order-1 order-md-2">
<img
src="product.jpg"
class="img-fluid"
alt="產品外觀"
>
</div>
</div>
在手機版中，圖片使用 order-1，因此會顯示在文字上方；進入 md 斷點後，文字改成第一個項目，圖片則移到第二個位置。
Bootstrap 也提供 order-first 和 order-last，可以快速將元素移到最前面或最後面。不過，order 只會改變視覺上的順序，不會改變 HTML 與鍵盤瀏覽順序，因此仍應保持原始內容結構合理。
五、用 data-bs-theme 快速啟用深色模式
Bootstrap 5.3 開始支援色彩模式。只要在 <html> 元素加入 data-bs-theme="dark"，就能讓支援色彩模式的頁面與元件使用深色外觀。
<html lang="zh-Hant" data-bs-theme="dark">
如果只想讓特定區塊套用深色模式，也可以將屬性放在該區塊：
<nav
class="navbar navbar-expand-lg bg-body-tertiary"
data-bs-theme="dark"
>
<div class="container">
<a class="navbar-brand" href="#">我的網站</a>
</div>
</nav>
需要製作切換按鈕時，可以使用 JavaScript 改變屬性：
<button
type="button"
class="btn btn-secondary"
id="themeButton"
>
切換明暗模式
</button>
<script>
const themeButton = document.querySelector("#themeButton");
themeButton.addEventListener("click", () => {
const currentTheme =
document.documentElement.getAttribute("data-bs-theme");
const nextTheme =
currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute(
"data-bs-theme",
nextTheme
);
});
</script>
Bootstrap 本身提供明暗色彩模式，但不會自動替網站加入完整的模式選擇器；切換按鈕、偏好儲存及是否跟隨系統設定，仍需要自行處理。
善用這些工具類別，可以減少重複的 CSS，並加快響應式版面的製作速度。不過，如果網站有完整的品牌風格或大量重複元件，仍建議搭配自訂 CSS 或 Sass 統一管理樣式，避免 HTML 累積過多難以閱讀的類別。