<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="jumbotron"> <div class="container"> </div><!-- /container --> </div><!-- /jumbotron --> <div class="container"> <div class="row"> <h2 class="col-xs-12">Gallery</h2> </div><!-- /row --> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="list-group"> <span href="#" class="list-group-item active"> Apples </span> <a href="#" class="list-group-item"> Honey Crisp </a> <a href="#" class="list-group-item"> Fuji </a> <a href="#" class="list-group-item"> Crimson </a> <a href="#" class="list-group-item"> Gala </a> <a href="#" class="list-group-item"> Golden Delicious </a> <a href="#" class="list-group-item"> Red Delicious (Yuck) </a> </div><!-- /list-group --> </div><!-- /col --> <div class="col-xs-12 col-sm-9"> <div class="row"> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> </div><!-- /row --> <div class="row"> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> <div class="col-xs-12 col-sm-4"> <a href="#" class="thumbnail"> <img src="//placehold.it/300x450"> </a> </div><!-- /col --> </div><!-- /row --> </div><!-- /col --> </div><!-- /row --> </div><!-- /container -->

.jumbotron { background-image: url('http://www.esri.com/~/media/Images/Banners/software/arcgis-open-data-banner-lg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 350px; }