"Footer Reviews w/ Modal"
Bootstrap 3.2.0 Snippet by rogerwillis

<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <!-- Niche --> <div class="btn btn-primary btn-lg" title="Niche Reviews"> <a class="text-white" href="https://www.niche.com/colleges/universal-technical-institute/" target="_blank">Niche Img</a></div> <!-- Google Menu --> <div class="btn btn-primary btn-lg" title="Share this content" data-toggle="modal" data-target="#myModal"> Google Reviews </div> <!-- Pissed COnsumer Menu --> <div class="btn btn-primary btn-lg" title="UTI Reviews"> <a class="text-white" href="https://www.uti-reviews.com/" target="_blank">Pissed COnsumer Img</a></div> <!-- FB Reviews Menu --> <div class="btn btn-primary btn-lg" title="Share this content" data-toggle="modal" data-target="#myFBModal"> FB Reviews </div> <!--Yelp Reviews Menu --> <div class="btn btn-primary btn-lg" title="Share this content" data-toggle="modal" data-target="#myYELPModal"> Yelp Reviews </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> <i class="fa fa-share-alt hidden"></i> Google Reviews</h4> </div> <div class="modal-body"> <p><a title="Campus" href="#">Campus Link</a></p> <p><a title="Campus" href="#">Campus Link</a></p> <p><a title="Campus" href="#">Campus Link</a></p> <p><a title="Campus" href="#">Campus Link</a></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="myFBModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> <i class="fa fa-share-alt hidden"></i> FB Reviews</h4> </div> <div class="modal-body"> <p><a title="Campus" href="#">FB Link</a></p> <p><a title="Campus" href="#">FB Link</a></p> <p><a title="Campus" href="#">FB Link</a></p> <p><a title="Campus" href="#">FB Link</a></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="myYELPModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel"> <i class="fa fa-share-alt hidden"></i> YELP Reviews</h4> </div> <div class="modal-body"> <p><a title="Campus" href="#">YELP Link</a></p> <p><a title="Campus" href="#">YELP Link</a></p> <p><a title="Campus" href="#">YELP Link</a></p> <p><a title="Campus" href="#">YELP Link</a></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
a.text-white {color:#fff;}

Related: See More


Questions / Comments: