如何更改 Bootstrap 4 模态标题的字体粗细？答案

【问题标题】：How do I change the font weight for a Bootstrap 4 modal header?如何更改 Bootstrap 4 模态标题的字体粗细？
【发布时间】：2020-07-13 08:33:57
【问题描述】：

如何在以下 Bootstrap 4 模态“标题”中增加字体粗细？

加分：我还想让字体颜色 = "#7f7f7f"...

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

谢谢！肖恩

【问题讨论】：

你能重现这个问题吗？你的意思是modal-header这个标题？
本身没有“问题”，只是格式偏好。你知道如何使 Bootstrap 4 模式的标题/标题“更粗”吗？
要么更改“modal-header”，要么更改“modal-title”以使其更粗。我是一个完整的 CSS/Bootstrap 新手，所以我猜这可能是一个非常简单的修复。
是的，添加了代码，请在下面验证。

标签： css bootstrap-4 bootstrap-modal

【解决方案1】：

将CSS 选择器添加到modal-title 或modal-header，将color、font-size 和font-weight 的属性添加到标题中。

.modal-title {
  font-size: 60px;
  color: #7f7f7f;
  font-weight: bolder;
}

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

@Technicalmirchi 这是给我的吗？！