how to make a bootstrap card clickable for a modal code example

Example: open modal on card click bootstrap

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg center-block" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">  
  <div class="modal-dialog">    
    <div class="modal-content">      
      <div class="modal-header card-header-title">        
        <h4 class="modal-title card-element-title">pick your locker side</h4>      
      </div>      
      <div class="modal-body">        
        <div class="card-content clearfix">          
          <div id="A" class="card left-half">a</div>          
          <div id="B" class="card right-half">b</div>          
          <div id="C" class="card left-half">c</div>          
          <div id="D" class="card right-half">d</div>        
        </div>      
      </div>    
    </div>  
  </div>
</div>