如何在移动设备尺寸下正确使用Bootstrap的Display-3类

你当前的写法存在错误：d-是Bootstrap用于控制元素display属性（如d-none隐藏、d-block块级显示等）的工具类前缀，和控制大标题字号的display-*标题类不属于同一体系，因此你写的d-sm-display-3不会生效，才会出现移动端文字截断的问题。

解决方案 #

Bootstrap原生支持响应式display-*标题类，遵循移动端优先的规则：先声明小屏要使用的标题类，再叠加对应断点的大屏标题类即可自动适配。
如果你需要在≥768px的平板/桌面端使用display-3效果，<768px的移动端自动切换为display-4，直接修改class如下即可：

<h1 class="display-4 display-md-3 animation" data-animation="fadeInUp" data-animation-delay="1.1s">Blockchain at Virginia Tech</h1>

如果觉得display-4在超小屏上还是偏大，你可以额外加一段自定义CSS做更精细的适配：

/* 适配小于576px的超小屏 */
@media (max-width: 575.98px) {
  .mobile-title {
    font-size: calc(1.4rem + 2.5vw);
    line-height: 1.2;
  }
}

修改后的代码如下：

<h1 class="mobile-title display-md-3 animation" data-animation="fadeInUp" data-animation-delay="1.1s">Blockchain at Virginia Tech</h1>

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