<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Search for Subject, Keyword, Help or Ideas...</h1> <hr> <h2>Most Popular<p class="lead">Subject | A-Z List</p></h2> <p>MISSION: The State College of Florida Libraries' Subject Guides and Tutorials are customized by SCF Librarians to support students with courses, assignments, skills and information literacy. Write to suggest a guide or have one created for a course. </p> <div class="row text-center portfolio"> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="https://s3.amazonaws.com/libapps/accounts/390/images/BeFunky_sub1.jpg.jpg" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> Find, evaluate and use scholarly and peer reviewed articles. </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="https://s3.amazonaws.com/libapps/accounts/390/images/BeFunky_sub2.jpg.jpg" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> Find support for literature, poetry and short story research. </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="https://s3.amazonaws.com/libapps/accounts/390/images/BeFunky_sub3.jpg.jpg" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> Research and APA citation help for NUR. </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="https://s3.amazonaws.com/libapps/accounts/390/images/BeFunky_sub4.jpg.jpg" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> Resources for argumentative and persuasive speech essays and speeches. ENC 1101, SPS 1608 </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> And, once again, here is a longer description given to a thumbnail grouping. </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> <div class="col-lg-2 col-sm-3 col-xs-4"> <div class="panel panel-default"> <div class="panel-body"> <a href="#"> <img src="http://placehold.it/200x200" class="img-thumbnail img-responsive"> </a> </div> <div class="panel-footer"> This is text </div> </div> </div> <div class="clear"></div> </div> </div>

/* add a little bottom space under the images */ @media (max-width: 767px) { .portfolio>.clear:nth-child(6n)::before { content: ''; display: table; clear: both; } } @media (min-width: 768px) and (max-width: 1199px) { .portfolio>.clear:nth-child(8n)::before { content: ''; display: table; clear: both; } } @media (min-width: 1200px) { .portfolio>.clear:nth-child(12n)::before { content: ''; display: table; clear: both; } }