Cacher is the code snippet organizer for pro developers

https://codepen.io/knitevision1/pen/BAFmk


    <div class="container">
  		<div class="row seven-cols">
   			<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>

    		<div class="col-lg-1 col-md-3 col-sm-4 col-xs-6">
    			<div class="staff-photo">
    				<img src="http://placehold.it/150x150.jpg">
    			</div>

    			<div class="staff-name">
    				<div class="staff-first-name">
    				STAFF
    				</div>
    				<div class="staff-second-name">
    				NAME
    				</div>
    			</div>

    			<div class="staff-title">
    				Staff Title and This Text Could Longer Due to Titles
    			</div>
    		</div>



   		 </div>
  	</div>



<style>
  
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}
/* 14% = 100% (full-width row) divided by 7 */

img{
  max-width: 100%;
}
  
  
</style>