How do I change the font weight for a Bootstrap 4 modal header?

Sean McCarthy :

How do I increase the font weight in the following Bootstrap 4 modal "header"?

Bonus points: I'd also like to make the font color = "#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>

Thanks! Sean

Manjuboyz :

Add a CSS selector to either modal-title or modal-header a properties of color, font-size and font-weight to the header .

.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>

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=383413&siteId=1