<hr>タグがうまく表示されません

Question

<hr>タグについて

初めて質問させていただきます。
以下のコードで2箇所にhrタグを使用しているのですが、1つ目のhrがなぜか機能しません。<hrと書いた時点では罫線が表示されるのですが(画像1枚目)、<hr>とタグを閉じた途端に消えてしまいます(画像2枚目)。何故なのでしょうか？Bootstrapのバージョンは4.3.1です。CSSは適用していません。
どなたか教えていただければ幸いです。よろしくお願いします。

該当のソースコード

<div class="container-fluid padding">
  <div class="row welcome text-center">
    <div class="col-12">
      <h1 class="display-4">Built with ease.</h1>
    </div>
    <hr>
    <div class="col-12">
      <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source frount-end library with HTML and CSS based designs.</p>
    </div>
  </div>
</div>

<div class="container-fluid padding">
  <div class="row text-center padding">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <i class="fas fa-code"></i>
      <h3>HTML5</h3>
      <p>Build with the latest version of HTML, HTML5.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <i class="fab fa-css3"></i>
      <h3>CSS3</h3>
      <p>Build with the latest version of CSS, CSS3.</p>
    </div>
    <div class="col-sm-12 col-md-4">
      <i class="fas fa-bold"></i>
      <h3>Bootstrap4</h3>
      <p>Build with the latest version of Bootstrap, Bootstrap4.</p>
    </div>
  </div>
  <hr class="my-4">
</div>

試したこと

chromeで検証してみると、うまく表示されている２つ目のhrはwidth*heightが473(可変)1であるのに対し、表示されない１つ目の方は01になっています。widthが0なので無いのと同じ状態だと思うのですが、なぜこうなるのかわかりません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

細かいですが、冒頭文章が全て見出しになっています。
読みやすさも質問内容の伝わりやすさにもつながりますので、
見出しと内容は明確に分けるようにしてください（質問は編集できます）

[m.ts10806]

><hrと書いた時点では罫線が表示されるのですが、

これ、何の話ですか？
使われているエディタの機能でしょうか？詳しく説明願います

[m.ts10806]

あとBootstrapはバージョンも記載してください。自身が組まれたCSSがあればそれも追記してください。
（要は他者がコピペで再現できる情報を提示してください）

[lioheart9]

お返事ありがとうございます。ご指摘いただいた部分について、修正・追記しました。どう質問すれば良いかもわかっていない状態で、とても助かりました。

Answer 1

おそらく置く場所だと思います。
ドキュメントだとGrid systemあたりですが、row～colの流れって１つのシステムみたいな形になっていて、そのシステム外に置くと無効化されるようなイメージがあります。
brとかは効くみたいですが、<p></p>は何個置いてもheightは０になりました。

もし、「Built with ease.の文字に下線を置きたい」のでしたら、h1のborder-bottomに線を設置するか、その下のコンテンツ部分のborder-topに線を設置した方が良いかと思います。

Comments

[lioheart9]

ご回答いただきありがとうございます。
そうだったのですね！置き場所を変えると良いとのことで、hrの位置をdivタグ内のh1直下に置いたところ、ちゃんと表示されるようになりました。ありがとうございました。

[m.ts10806]

その位置に置くのは悪手かなと。。。
下の方のhrも含めてborderで書いた方がコードはスッキリします。

[lioheart9]

そうなんですか・・・！確かにhrとして別のタグを間に挟み込むよりも、上下要素どちらかのborderで指定した方がきれいですね。何度も見ていただきありがとうございます。修正してみます。

Answer 2

hrからborder-bottomでの記載に変更することで、同様の罫線を問題なく表示できるようになりました。

<div class="container-fluid padding">
  <div class="row welcome text-center">
    <div class="col-12">
      <h1 class="display-4 border-bottom">Built with ease.</h1>
    </div>
    <div class="col-12">
      <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source frount-end library with HTML and CSS based designs.</p>
    </div>
  </div>
</div>

<div class="container-fluid padding">
  <div class="row text-center padding border-bottom">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <i class="fas fa-code"></i>
      <h3>HTML5</h3>
      <p>Build with the latest version of HTML, HTML5.</p>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <i class="fab fa-css3"></i>
      <h3>CSS3</h3>
      <p>Build with the latest version of CSS, CSS3.</p>
    </div>
    <div class="col-sm-12 col-md-4">
      <i class="fas fa-bold"></i>
      <h3>Bootstrap4</h3>
      <p>Build with the latest version of Bootstrap, Bootstrap4.</p>
    </div>
  </div>
</div>

Answer 3

h1の直下にhrを置くことで表示できました。

<div class="container-fluid padding">
  <div class="row welcome text-center">
    <div class="col-12">
      <h1 class="display-4">Built with ease.</h1>
      <hr>
    </div>
    <div class="col-12">
      <p class="lead">Welcome to my Bootstrap 4 website tutorial! Bootstrap is a free and open-source frount-end library with HTML and CSS based designs.</p>
    </div>
  </div>
</div>