5 <meta name=
"viewport" content=
"width=device-width, initial-scale=1, shrink-to-fit=no">
6 <meta name=
"description" content=
"">
7 <meta name=
"author" content=
"">
8 <link rel=
"icon" href=
"../../favicon.ico">
10 <title>Album example for Bootstrap
</title>
12 <!-- Bootstrap core CSS -->
13 <link href=
"../../dist/css/bootstrap.min.css" rel=
"stylesheet">
15 <!-- Custom styles for this template -->
16 <link href=
"album.css" rel=
"stylesheet">
21 <div class=
"collapse bg-inverse" id=
"navbarHeader">
22 <div class=
"container">
24 <div class=
"col-sm-8 py-4">
25 <h4 class=
"text-white">About
</h4>
26 <p class=
"text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
</p>
28 <div class=
"col-sm-4 py-4">
29 <h4 class=
"text-white">Contact
</h4>
30 <ul class=
"list-unstyled">
31 <li><a href=
"#" class=
"text-white">Follow on Twitter
</a></li>
32 <li><a href=
"#" class=
"text-white">Like on Facebook
</a></li>
33 <li><a href=
"#" class=
"text-white">Email me
</a></li>
39 <div class=
"navbar navbar-inverse bg-inverse">
40 <div class=
"container d-flex justify-content-between">
41 <a href=
"#" class=
"navbar-brand">Album
</a>
42 <button class=
"navbar-toggler" type=
"button" data-toggle=
"collapse" data-target=
"#navbarHeader" aria-controls=
"navbarHeader" aria-expanded=
"false" aria-label=
"Toggle navigation">
43 <span class=
"navbar-toggler-icon"></span>
48 <section class=
"jumbotron text-center">
49 <div class=
"container">
50 <h1 class=
"jumbotron-heading">Album example
</h1>
51 <p class=
"lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.
</p>
53 <a href=
"#" class=
"btn btn-primary">Main call to action
</a>
54 <a href=
"#" class=
"btn btn-secondary">Secondary action
</a>
59 <div class=
"album text-muted">
60 <div class=
"container">
64 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
65 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
68 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
69 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
72 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
73 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
77 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
78 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
81 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
82 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
85 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
86 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
90 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
91 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
94 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
95 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
98 <img data-src=
"holder.js/100px280/thumb" alt=
"Card image cap">
99 <p class=
"card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
106 <footer class=
"text-muted">
107 <div class=
"container">
108 <p class=
"float-right">
109 <a href=
"#">Back to top
</a>
111 <p>Album example is
© Bootstrap, but please download and customize it for yourself!
</p>
112 <p>New to Bootstrap?
<a href=
"../../">Visit the homepage
</a> or read our
<a href=
"../../getting-started/">getting started guide
</a>.
</p>
116 <!-- Bootstrap core JavaScript
117 ================================================== -->
118 <!-- Placed at the end of the document so the pages load faster -->
119 <script src=
"https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity=
"sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin=
"anonymous"></script>
120 <script>window.jQuery || document.write('
<script src=
"../../assets/js/vendor/jquery.min.js"><\/script
>')
</script>
121 <script src=
"https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity=
"sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin=
"anonymous"></script>
122 <script src=
"../../assets/js/vendor/holder.min.js"></script>
125 Holder.addTheme(
"thumb", { background:
"#55595c", foreground:
"#eceeef", text:
"Thumbnail" });
128 <script src=
"../../dist/js/bootstrap.min.js"></script>
129 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
130 <script src=
"../../assets/js/ie10-viewport-bug-workaround.js"></script>