Bootstrapにてulに対する横並び、list-inlineが効かない

Bootstrapについて勉強中です。　
ウェブ上の記事を見て、リストを横並びに表示したい場合は下記コードのようにするとできるといった記事を見てやってみたのですが反映されません。

<!--HTML-->
<ul class="list-inline">
  <li>HOME</li>
  <li>町田</li>
  <li>カレンダー</li>
  <li>map</li>
  <li>掲示板</li>
</ul>

何か事足りない点はありますでしょうか。　ご教示いただけますと助かります。　
またヘッダー部は下記のようになっており他のBootstrapは反映されています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
<body>
<ul class="list-inline">
  <li>HOME</li>
  <li>町田</li>
  <li>カレンダー</li>
  <li>map</li>
  <li>掲示板</li>
</ul>

<div class="container">
 <div class="table-responsive">
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>#</th>
        <th>名前</th>
        <th>メールアドレス</th>
        <th>電話番号</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
          <td>煌木 太郎</td>
          <td>taro.kirameki@example.com</td>
          <td>09011112222</td>
      </tr>
      <tr>
        <th scope="row">2</th>
          <td>煌木 次郎</td>
          <td>jiro.kirameki@example.com</td>
          <td>09033334444</td>
      </tr>
      <tr>
        <th scope="row">3</th>
          <td>煌木 花子</td>
          <td>hanako.kirameki@example.com</td>
          <td>09055556666</td>
      </tr>
    </tbody>
  </table>
　</div>
</div>

Bootstrapのバージョンは4です。