BootStrapで横並びの画像の下に文字を入れたい

前提・実現したいこと

BootStrapで趣味のページを作っています。
画像を横並びにした後、文字を画像の真下に持っていくにはどうすればよろしいでしょうか？

該当のソースコード

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      
    <title>NARUTO同好会</title>
  </head>

  <body>
    <nav id="navbar-example2" class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">NARUTO</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#fat">キャラクター</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#mdo">あらすじ</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">章</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#one">一章</a>
            <a class="dropdown-item" href="#two">二章</a>
            <!-- <div role="separator" class="dropdown-divider"></div> -->
            <a class="dropdown-item" href="#three">三章</a>
          </div>
        </li>
      </ul>
    </nav>
    <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
        <h4 id="fat">キャラクター</h4>
        <div class="row">
          <p><img src="uzumakinaruto.jpg" width="200px" height="200px"></p>
          <p>うずまきナルト</p>
          <p><img src="uchihasasuke.jpg" width="200px" height="200px"></p>
          <p>うちはサスケ</p>
          <p><img src="harunosakura.jpg" width="200px" height="200px"></p>
          <p>はるのサクラ</p>
          <p><img src="hatakekakashi.jpg" width="200px" height="200px"></p>
          <p>はたけカカシ</p>
        </div>
          <h4 id="mdo">あらすじ</h4>
          <p>...</p>
          <h4 id="one">一章</h4>
          <p>...</p>
          <h4 id="two">二章</h4>
          <p>...</p>
          <h4 id="three">三章</h4>
          <p>...</p>
     </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

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

なし

分かる方、ご教示願います。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように書いて下さい。

html
1<h3 id="fat">キャラクター</h4>
2<div class="row">
3    <p>
4        <img src="uzumakinaruto.jpg" width="200px" height="200px">
5        <span class="text-center d-block">うずまきナルト</span>
6    </p>
7    <p>
8        <img src="uchihasasuke.jpg" width="200px" height="200px">
9        <span class="text-center d-block">うちはサスケ</span>
10    </p>
11    <p>
12        <img src="harunosakura.jpg" width="200px" height="200px">
13        <span class="text-center d-block">はるのサクラ</span>
14    </p>
15    <p>
16        <img src="hatakekakashi.jpg" width="200px" height="200px">
17        <span class="text-center d-block">はたけカカシ</span>
18    </p>
19</div>
20<h4 id="mdo">あらすじ</h4>