How to display Custom Post type in bootstrap columns in Wordpress

Question

i am trying to display feature images from a custom post type (Wordpress) but i am not skilled in PHP, I am using an HTML startbootstrap template called (Business) witch use Bootstrap framework, i did all the pages and wordpress templates, just for now i cant display my portfolio in 3 grid column witch use a modal to display project details, my static code is like this:

<div class="row">
                <div class="col-md-4 col-sm-9 portfolio-item">
 
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                        <div class="portfolio-hover">
                            <div class="portfolio-hover-content">
                                <i class="fa fa-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/myimage.jpg" class="img-responsive" alt="my text">
                    </a>
                <div class="portfolio-caption">
                        <h4>MatriConseil</h4>
                        <p class="text-muted">my text</p>
                    </div>
</div>

And that calls a modal like this:

<div class="portfolio-modal modal fade" id="portfolioModal12" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h1>Darlink</h1>
                            <p class="item-intro text-muted">My muted text</p>
                            <img class="img-responsive img-centered" src="img/myimage.jpg" alt="Création de site internet à Marrakech">
                            <p>my text</p>
                              <ul class="list-inline">
                                <li>Date: my text 2014</li>
                                <li>Client: my text </li>
                                <li>Catégorie: my text </li>
                            </ul>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Fermer</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

I know i have to do that with a Loop, but i tried different ones and i dont know the place where i put php code:

I have to achieve portfolio like this:

Portfolio Layout with 4X Grid column

Please excuse my english, and thanks in advance for your help

I have solved the horizontal alignment of the images, but one more think i cant, i cant display Modal on clicking the images or sometimes when i delete the reset query only one item is displayed in Modal :

<?php  wp_reset_query(); ?>

This is my loop with my HTML code and my Custom Content Type:

<section id="portfolio">
     
 <div class="container">
    
      <div class="row">

<?php $loop = new WP_Query( array( 'post_type' => 'portfoliologo', 'posts_per_page' => -1 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?> 

          <div class="col-md-4 portfolio-item">

 <a href="#portfoliologo<?php echo '#portfoliologo' .get_the_ID() ?>" data-toggle="modal" class="portfolio-link"  >      
 
             <div class="portfolio-hover">
                                  
          <div class="portfolio-hover-content">
              <i class="fa fa-plus fa-3x"></i>
          </div>
                                          
               </div>
       
<?php the_post_thumbnail('post-image', array('class' => 'img-responsive')); ?>
                  
               </a><!-- End Portfolio Hover -->           
                          
          </div><!-- End Col -->
                   
   <?php endwhile; ?>
   <?php  wp_reset_query(); ?>
       
</div><!-- End Row -->
  
<style>
//additional styles required for grid
.portfolio-item .col-md-4 img {
 max-height:260px;
}
</style> 
 
</div><!-- Container -->

</section><!-- Section Portfolio -->

And this is My Modal in the same template:

<!-- Portfolio Modal Section -->
 
 <div class="portfolio-modal modal fade" id="portfoliologo<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h1><?php the_title(); ?></h1>
                            <?php the_post_thumbnail('post-image', array('class' => '')); ?>                           
                            <?php the_content(); ?>
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Fermer </button>
                        </div><!-- Modal Body -->
                    </div><!-- Col -->
                </div><!-- row -->
            </div><!-- Container -->
        </div><!-- Modal Content -->
    </div><!-- Portfolio Modal -->

Please i need your help