Creating the three-column layout

We will first start with the content for our All Photos tab. Let's look at the code now:

<div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="all">
            <div class="row">
              <div class="col-md-4">
                <a href="images/sample1.jpg" data-lightbox="gallery" 
                data-title="Sample Image One">
                  <img src="images/sample1.jpg" class="img-thumbnail">
                </a>
                <div class="title">Sample Image One</div>
              </div>

We have a div tag with tab-content as our class. We then added one more div tag with id="all" and set role to tabpanel. Since it's a pane, we are going to add class="tab-pane" and make it active. Now come the first row and column, so we are going to create a medium column, col-md-4. This column will contain our anchor tag, where we are going to reference the image that we need...