bootstrap　複数コンテンツ分割について

bootstrapでタグで複数コンテンツの切り替えをやっているのですが
下記のコードで最初読み込むときにコンテンツごとに分割されずすべてのコンテンツが一緒に出てきてしまい。
それぞれのタブをクリックしていくとコンテンツごとに表示されるようになるのですが
最初からコンテンツごとに分割して表示するにはどのようにすればよいでしょうか？
よろしければお力を貸してください。

html
1<ul class="nav nav-tabs" role="tablist">
2    <li class="nav-item">
3        <a class="nav-link active" href="#home" data-toggle="tab" role="tab">
4            Home
5        </a>
6    </li>
7
8    <li class="nav-item">
9        <a class="nav-link " href="#middle" data-toggle="tab" role="tab">
10            Middle
11        </a>
12    </li>
13
14    <li class="nav-item">
15        <a class="nav-link " href="#finish" data-toggle="tab" role="tab">
16            Finish
17        </a>
18    </li>
19</ul>
20
21<!--ここからコンテンツ内のページを設定-->
22<div class="tab-content">
23    <div class="tab-pane fade show active" id="home" role="tabpanel" style="background-color: seashell;">
24        ※これはホームページです。<br><br>
25        上のリンクで切り替えできます。
26    </div>
27
28    <div class="tab-pane fade show active" id="middle" role="tabpanel" style="background-color: seashell;">
29        ※これは中央コンテンツ
30        <div class="alert alert-primary">
31            ※これは中央ページです。
32            上のリンクで切り替えできます。
33        </div>
34    </div>
35
36    <div class="tab-pane fade show active" id="finish" role="tabpanel" style="background-color: seashell;">
37        ※これは最終ページです。
38        上のリンクで切り替えできます。
39        <div class="card">
40            <div class="card-body">
41                <h5 class="card-title">Card</h5>
42                <p class="card-text">※サンプルで用意したから無視OK</p>
43            </div>
44        </div>
45    </div>
46</div>