如何在Bootstrap3项目中使用Bootstrap5的card类且不引入完整Bootstrap5？

方案1：提取Bootstrap5 Card核心CSS并修改类名隔离 #

直接从Bootstrap5的源码或编译后的CSS文件中筛选出Card相关的所有样式规则，将类名统一修改为不会与Bootstrap3冲突的前缀（比如b5-），再单独引入项目。

示例修改后的CSS代码：

/* 自定义隔离的Bootstrap5 Card样式 */
.b5-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}
.b5-card-body {
  flex: 1 1 auto;
  padding: 1rem 1rem;
}
.b5-card-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
}
.b5-card-text {
  margin-bottom: 1rem;
}
/* 按需添加.card-header、.card-footer等其他相关样式，同样修改类名 */

使用时直接替换类名：

<div class="b5-card">
  <div class="b5-card-body">
    <h5 class="b5-card-title">Card标题</h5>
    <p class="b5-card-text">Card内容</p>
  </div>
</div>

方案2：手动实现等效Bootstrap5 Card样式 #

完全自定义CSS模拟Bootstrap5 Card的视觉效果，彻底脱离Bootstrap5依赖，避免任何冲突风险。

示例自定义CSS：

/* 模拟Bootstrap5 Card的自定义样式 */
.custom-card {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}
.custom-card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid #dee2e6;
}
.custom-card-body {
  padding: 1rem;
}
.custom-card-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

方案3：用命名空间限定Bootstrap5 Card样式范围 #

如果坚持使用Bootstrap5原生类名，可以给Card外层嵌套一个专属容器，通过CSS后代选择器将Bootstrap5的Card样式限定在容器内部，避免污染全局Bootstrap3样式。

示例代码：

/* 命名空间容器，仅作用内部的Bootstrap5 Card样式 */
.bootstrap5-card-scope .card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}
.bootstrap5-card-scope .card-body {
  flex: 1 1 auto;
  padding: 1rem 1rem;
}
/* 其他Card相关样式均添加.bootstrap5-card-scope前缀 */

使用时嵌套容器：

<div class="bootstrap5-card-scope">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">原生类名Card</h5>
    </div>
  </div>
</div>

注意：所有方案均无需引入Bootstrap5的JS文件，仅处理CSS部分即可避免组件冲突。

内容的提问来源于stack exchange，提问作者Milo