jumbotronの中のh1タグにbootstrapが効かない。

Question

現在ポートフォリオを作成しているのですが、jumbotronの中のh1タグにbootstrapが効かず、レスポンシブ対応にできません。
本当は「プロ野球掲示板」と表示されて欲しいのですが、「プロ野球掲」で途切れてしまっています。

<div class="container">
  <div class="jumbotron jumbotron-fluid">
    <h1 class="npb-blog-title text-white p-3 badge badge-primary">プロ野球掲示板</h1>
    <p class="lead">好きなプロ野球の話題について語り会おう！！</p>
    <%= search_form_for @q, class: "form-inline my-2 my-lg-0 d-block mx-auto" do |f| %>
      <%= f.search_field :title_cont, class: "form-control mr-sm-2", placeholder: "検索する" %>
      <%= f.submit "検索", class: "btn btn-success my-2 my-sm-0" %>
    <% end %>
  </div>
</div>
<div class="container">
  <%= render partial: "tweet", locals: { tweets: @tweets } %>
</div>

.jumbotron {
  width: 100%;
  height: 400px;
  background-image: url("https://www.hanshin.co.jp/koshien/img/top/vision/main07.jpg");
  text-align: center;
  .npb-blog-title {
    font-weight: bold;
    font-size: 100px;
    color: black;
  }
  .lead {
    font-weight: bold;
    font-size: 20px;
    color: black;
  }
}
.article-all {
  text-align: center;
  margin-top: 30px;
  font-size: 30px;
  font-weight: bold;
}
.row {
  justify-content: space-between;
}
.card-img-top {
  height: 300px;
}
.fa-heart {
  color: #ff1493;
}

色々ネットで調べて見たのですが、解決策が見つかりませんでした。
どうかご教授お願い致します。

Comments

[8zca]

どのように表示されるのがゴールでしょうか？
折り返して表示したい、文字サイズを小さくして収まるようにしたい等
また、chromeのデベロッパーツールでh1を検証してみると何のcssが効いているかわかると思います。

[yoshinavi]

コピペで状況が再現可能な、コードで提示されると、回答も付きやすいかと思います。

Answer 1

何をもって効いていないと判断しているのかわかりませんが、.badge は小さなアイコン的な使い方をするものなので見出しには使わないほうがいいのではないでしょうか？
とくにはみ出すような大きな文字の場合、 white-space: nowrap; があるので折り返しません。
https://getbootstrap.com/docs/4.3/components/badge/