<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
<link rel="stylesheet" href="https://raw.github.com/blueimp/Bootstrap-Image-Gallery/master/css/bootstrap-image-gallery.css">
<link rel="stylesheet" href="https://raw.github.com/blueimp/Bootstrap-Image-Gallery/master/css/demo.css">
<div class="container">
<h1>Bootstrap Image Gallery Demo</h1>
<blockquote>
<p>Bootstrap Image Gallery is an extension to <a href="http://blueimp.github.io/Gallery/">blueimp Gallery</a>, a touch-enabled, responsive and customizable image & video gallery.
<br>It displays images and videos in the modal dialog of the <a href="http://getbootstrap.com/">Bootstrap</a> framework, features swipe, mouse and keyboard navigation, transition effects, fullscreen support and on-demand content loading and can
be extended to display additional content types.</p>
</blockquote>
<form class="form-inline">
<div class="form-group">
<button id="video-gallery-button" type="button" class="btn btn-success btn-lg">
<i class="glyphicon glyphicon-film"></i>
Launch Video Gallery
</button>
</div>
<div class="form-group">
<button id="image-gallery-button" type="button" class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-picture"></i>
Launch Image Gallery
</button>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-lg">
<i class="glyphicon glyphicon-leaf"></i>
<input id="borderless-checkbox" type="checkbox">Borderless
</label>
<label class="btn btn-primary btn-lg">
<i class="glyphicon glyphicon-fullscreen"></i>
<input id="fullscreen-checkbox" type="checkbox">Fullscreen