Adding a View All button to a website section and styling it - html

Question

I am learning to create a website by downloading and editing contents.
I have created a section in the home page which shows the images of all stores of a shop. I need to display 3 stores image on the home page and add a View all button in the right bottom side of the section.
I have tried many ways but can't get it done in a good way.
Below is the HTML Code :
<!-- 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>

Answer 1

Why not just adding a new row, text aligned to right with the button ?
edit: See other response, this one only tell how to add the HTML button, not the javascript of it.
<!-- 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>

Answer 2

If you don't want to load them asynchronously (resp. you have them in HTML file already) you can wrap them into div, which is set as a hidden in css display:none
Then you need Javascript and create event which handles DOM interaction on click.
I made a little sample for you with CSS and jQuery (Javascript Framework):
https://jsfiddle.net/ta53jfwo/
I hope it helps!