[解決済み] Webサイトのセクションに「すべて表示」ボタンを追加してスタイリングする

質問

コンテンツをダウンロードし、編集することでホームページを作成することを学んでいます。

トップページに、あるショップの全店舗の画像を表示するセクションを作りました。トップページに3店舗の画像を表示させ、その上に すべて表示 ボタンが表示されます。

いろいろ試したのですが、なかなか良い形になりません。

以下は、HTMLコードです。

<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Our Stores</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a href="#storeModal1" class="store-link" data-toggle="modal">
                    <div class="store-hover">
                        <div class="store-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/store/store01.png" class="img-responsive" alt="">
                </a>
                <div class="store-caption">
                    <h4>Store 01</h4>
                    <p class="text-muted">Location 01</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 store-item">
                <a href="#storeModal2" class="store-link" data-toggle="modal">
                    <div class="store-hover">
                        <div class="store-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/store/store02.png" class="img-responsive" alt="">
                </a>
                <div class="store-caption">
                    <h4>Store 02</h4>
                    <p class="text-muted">Location 02</p>
                </div>
            </div>               
        </div>
    </div>
</section>

解決方法は？

新しい行を追加して、テキストをボタンと一緒に右寄せにすればいいのでは？

edit: 他の回答を参照してください。この回答は、HTMLボタンを追加する方法のみを伝え、それのjavascriptは伝えていません。

<!-- OUR STORES Section -->
<section id="stores" class="bg-light-gray">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">Our Stores</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a href="#storeModal1" class="store-link" data-toggle="modal">
                    <div class="store-hover">
                        <div class="store-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/store/store01.png" class="img-responsive" alt="">
                </a>
                <div class="store-caption">
                    <h4>Store 01</h4>
                    <p class="text-muted">Location 01</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 store-item">
                <a href="#storeModal2" class="store-link" data-toggle="modal">
                    <div class="store-hover">
                        <div class="store-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="img/store/store02.png" class="img-responsive" alt="">
                </a>
                <div class="store-caption">
                    <h4>Store 02</h4>
                    <p class="text-muted">Location 02</p>
                </div>
            </div>               
        </div>

        <!-- HERE -->
        <div class="row">
          <div class="col-md-12 text-right">
            <button class="btn btn-primary">View All</button>
          </div>
      	</div>

    </div>
</section>