Difference between revisions of "Album"
Jump to navigation
Jump to search
9 mins
9 mins
9 mins
9 mins
9 mins
9 mins
9 mins
9 mins
9 mins
(Created page with "<html> <header> <div class="collapse bg-dark" id="navbarHeader"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <...") |
(Full prototype) |
||
| Line 45: | Line 45: | ||
</section> | </section> | ||
| + | |||
| + | <div class="album py-5 bg-light"> | ||
| + | <div class="container"> | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-4"> | ||
| + | <div class="card mb-4 shadow-sm"> | ||
| + | <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> | ||
| + | <div class="card-body"> | ||
| + | <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> | ||
| + | <div class="d-flex justify-content-between align-items-center"> | ||
| + | <div class="btn-group"> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">View</button> | ||
| + | <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> | ||
| + | </div> | ||
| + | <small class="text-muted">9 mins</small> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </main> | ||
| + | |||
| + | <footer class="text-muted"> | ||
| + | <div class="container"> | ||
| + | <p class="float-right"> | ||
| + | <a href="https://getbootstrap.com/docs/4.4/examples/album/#">Back to top</a> | ||
| + | </p> | ||
| + | <p>Album example is © Bootstrap, but please download and customize it for yourself!</p> | ||
| + | <p>New to Bootstrap? <a href="https://getbootstrap.com/">Visit the homepage</a> or read our <a href="https://getbootstrap.com/docs/4.4/getting-started/introduction/">getting started guide</a>.</p> | ||
| + | </div> | ||
| + | </footer> | ||
</html> | </html> | ||
Revision as of 22:56, 21 May 2020
Album example
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.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
