Advanced WP-Bootstrap: Where would I place the JS Modal code inside WordPress index.php for Responsive Photo Gallery?

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">         
                    <div class="modal-body">                
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
              </div><!-- /.modal -->

<?php
/**
 * Main Template File
 * 
 * This file is used to display a page when nothing more specific matches a query.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package Duvalls_beta_tester
 */
?>

<?php get_header(); ?>


    <div class="container">


      <div>

                <?php             
                  $args = array('post_type' => 'profiles');
                  $query = new WP_Query($args);             
                  while($query -> have_posts()): $query -> the_post();         
                ?>


            <div class="profile row">
                <div class="col-md-2">
                  <?php echo(types_render_field( "profile-picture", array( "alt" => "blue bird", "width" => "140", "height" => "140", "proportional" => "true" ) )); ?>
                </div>
                <div class="col-md-10">
                  <h4><p><?php echo(types_render_field( "user-name", array( ) )); ?></p></h4>
                  <p><?php echo(types_render_field( "user-profile", array( ) )); ?></p>
                </div>
            </div>







              <div class=".container-gallery">

                <ul class="row">

                 // gallery photos inside <li></li> are here


                </ul>

              </div>  



              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">         
                    <div class="modal-body">                
                    </div>
                  </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
              </div><!-- /.modal -->


                <?php endwhile; ?>


                <div class="row">
                  <?php get_footer(); ?>
                </div>


      </div>