<div class="row col-container">
<div class="col-sm-3 col well" data-target="#Profile-1" data-toggle="modal" style="cursor: pointer;">
<p style="text-align: center;"><span><img alt="Profile 1" class="img-responsive" data-entity-type="" data-entity-uuid="" id="" src="/sites/services.nwu.ac.za/files/files/drupal%40nwu/image/Profile-placeholder.png" title="" /><span title="Click and drag to resize">​</span></span></p>

<h3>Profile 1</h3>

<p>Introduction (read more)</p>
</div>

<div class="modal fade" id="Profile-1" role="dialog">
<div class="modal-dialog  modal-lg"><!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color:#78848E; color:#ffffff;"><button class="close" data-dismiss="modal" style="color:#ffffff;" type="button">×</button>

<h4>Profile 1</h4>
</div>

<div class="modal-body" style="padding:40px 50px;">

<p><strong>Heading</strong></p>

<p class="text-align-justify">Paragraph</p>
 

<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>

</div>
</div>
</div>
</div>

<div class="col-sm-3 col well" data-target="#Profile-2" data-toggle="modal" style="cursor: pointer;">
<p style="text-align: center;"><span><img alt="Profile 2" class="img-responsive" data-entity-type="" data-entity-uuid="" id="" src="/sites/services.nwu.ac.za/files/files/drupal%40nwu/image/Profile-placeholder.png" title="" /><span title="Click and drag to resize">​</span></span></p>

<h3>Profile 2</h3>

<p>Introduction (read more)</p>
</div>

<div class="modal fade" id="Profile-2" role="dialog">
<div class="modal-dialog  modal-lg"><!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color:#78848E; color:#ffffff;"><button class="close" data-dismiss="modal" style="color:#ffffff;" type="button">×</button>

<h4>Profile 2</h4>
</div>

<div class="modal-body" style="padding:40px 50px;">

<p><strong>Heading</strong></p>

<p class="text-align-justify">Paragraph</p>
 

<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>

</div>
</div>
</div>
</div>

<div class="col-sm-3 col well" data-target="#Profile-3" data-toggle="modal" style="cursor: pointer;">
<p style="text-align: center;"><span><img alt="Profile 3" class="img-responsive" data-entity-type="" data-entity-uuid="" id="" src="/sites/services.nwu.ac.za/files/files/drupal%40nwu/image/Profile-placeholder.png" title="" /><span title="Click and drag to resize">​</span></span></p>

<h3>Profile 3</h3>

<p>Introduction (read more)</p>
</div>

<div class="modal fade" id="Profile-3" role="dialog">
<div class="modal-dialog  modal-lg"><!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px; background-color:#78848E; color:#ffffff;"><button class="close" data-dismiss="modal" style="color:#ffffff;" type="button">×</button>

<h4>Profile 3</h4>
</div>

<div class="modal-body" style="padding:40px 50px;">

<p><strong>Heading</strong></p>

<p class="text-align-justify">Paragraph</p>
<div class="modal-footer"><button class="btn btn-default" data-dismiss="modal" type="button">Close</button></div>
</div>
</div>
</div>
</div>
</div>