jumbotron 在 bootstrap 5 中已被彻底移除，源码和文档均不再存在；需用 .container-fluid + bg- + py- + rounded + display-4 + lead 等工具类组合实现等效效果。
Bootstrap 5 中 jumbotron 类已彻底移除
直接说结论：jumbotron 在 Bootstrap 5 中不是“不推荐”，而是被完全删掉了——源码里没有这个 class，文档里也不再提及。如果你在 Bootstrap 5 项目中写 <div class="jumbotron">，它不会报错，但也不会有任何默认样式，纯属一个空容器。<p>这不是疏忽或遗漏，是官方明确的设计决策：用原子化工具类替代预设组件，降低 CSS 体积、提升定制自由度。所以别找“如何启用 Bootstrap 5 的 jumbotron”，它不存在；要的是“怎么用现有类拼出等效效果”。</p>
<h3>用 <code>.container + 工具类复刻 Jumbotron 视觉结构
核心思路是拆解旧版 jumbotron 的视觉特征：全宽/居中容器 + 背景色 + 垂直内边距 + 大号文字 + 圆角（可选）+ 文字颜色适配。
推荐组合（以浅灰背景、深色文字为例）：
<div class="container-fluid py-5 bg-light rounded"> —— 全宽、上下留白、浅灰底、轻微圆角<li>内部标题用 <code><h1 class="display-4 fw-normal"></h1>—— 保持字号和 font-weight: 200 的轻量感- 段落用
<p class="lead"></p>—— 保留语义和默认行高/字号 - 如需暗色背景（如
.bg-dark），务必加.text-white，否则文字不可读 - 写
<div class="jumbotron jumbotron-fluid"> —— <code>jumbotron无效，jumbotron-fluid也不存在 - 只写
<div class="container-fluid"> 却忘了加 <code>bg-*和py-*—— 结果只是个透明无边距的宽条 - 在
.container-fluid外再套一层<div> 并加 <code>bg-*—— 导致背景溢出、响应式错乱自定义变体时优先覆盖工具类，而非写新 CSS
比如想让所有“Jumbotron 替代区块”统一用深蓝背景+白字+阴影，不要新建一个
.my-jumbotron并重复写 padding/background/color，而是直接复用并组合：<div class="container-fluid py-5 bg-primary text-white shadow"> <p>这样更轻量、更易维护。只有当你需要：</p> <ul> <li>非标准圆角（如左上右下不同半径）</li> <li>渐变背景（<code>bg-gradient不够用） - 动态高度（如视口高度
min-vh-100）
注意：.container-fluid 是全宽，.container 是响应式固定宽度；.py-5 是垂直内边距，值可调（py-3～py-6 更常用）；.rounded 默认圆角较小，要更大可用 .rounded-3。
jumbotron-fluid 在 Bootstrap 5 中没有对应类
Bootstrap 4 的 .jumbotron-fluid 是为取消最大宽度限制而设的修饰类，但在 Bootstrap 5 中，它被直接合并进 .container-fluid 的语义里——你不需要额外加类来“流体化”，只要不用 .container 就行。
常见错误：
才考虑少量补充 CSS，且应写在 Bootstrap 引入之后，避免被覆盖。另外，.shadow 在移动端默认关闭（为性能），如需始终显示，用 .shadow-sm 或自定义 box-shadow。
最易被忽略的一点：旧版 Jumbotron 默认有 margin-bottom: 2rem，而工具类方案里没有。如果多个区块堆叠，记得手动加 mb-5 之类，否则视觉节奏会塌掉。
