Page Title:
Meta Description:
Adapted version of the Album Template that has been extracted from Bootstrap examples.
Page URL:
•••
Page CSS:
edit
bootstrap.css
ck-demo.css
ckeditor-premium.css
ckeditor.css
default.css
don-quixote.css
Permission to edit next time:
Wherever you want
In the built-in HTML editor only
In the built-in constructor only
Save
Cancel
Oops, I want to edit this page in a built-in
Constructor
or in a built-in
HTML editor
.
Page HTML:
<section class="album-template"> <style hidden> .album-template .bd-placeholder-img { font-size: 1.125rem; text-anchor: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; } </style> <header data-bs-theme="dark"> <div class="collapse text-bg-dark" id="navbarHeader-album-template"> <div class="container"> <div class="row"> <div class="col-sm-8 col-md-7 py-4"> <h4>About</h4> <p class="text-body-secondary">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> </div> <div class="col-sm-4 offset-md-1 py-4"> <h4>Contact</h4> <ul class="list-unstyled"> <li> <a href="./" class="text-white"> Home Page </a> </li> <li> <a href="toc" class="text-white"> Table Of Contents </a> </li> <li> <a href="credits" class="text-white"> Credits </a> </li> </ul> </div> </div> </div> </div> <div class="navbar navbar-dark bg-dark shadow-sm"> <div class="container"> <a href="./" class="navbar-brand d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"> <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/> <circle cx="12" cy="13" r="4"/> </svg> <strong> Album </strong> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader-album-template" aria-controls="navbarHeader-album-template" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"/> </button> </div> </div> </header> <article> <div class="py-5 text-center container"> <div class="row py-lg-5"> <div class="col-lg-6 col-md-8 mx-auto"> <h1 class="fw-light"> Album example </h1> <p class="lead text-body-secondary">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> <p> <a href="./" class="btn btn-primary my-2"> Home Page </a> <a href="credits" class="btn btn-secondary my-2"> Credits </a> </p> </div> </div> </div> <section class="album py-5 bg-body-tertiary"> <section class="container"> <section class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3"> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 1</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 2</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 3</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 4</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 5</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 6</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 7</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 8</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> <div class="col"> <div class="card shadow-sm"> <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"> <title>Placeholder</title> <rect width="100%" height="100%" fill="#55595c"/> <text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail 9</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"> <a href="./" class="btn btn-sm btn-outline-secondary">View</a> <a href="./" class="btn btn-sm btn-outline-secondary">Edit</a> </div> <small class="text-body-secondary">9 mins</small> </div> </div> </div> </div> </section> </section> </section> </article> <footer class="text-body-secondary py-5"> <div class="container"> <p class="float-end mb-1"> <a href="./"> Go to Home </a> </p> <p class="mb-1">Album example is © Bootstrap, but please download and customize it for yourself!</p> <p class="mb-0">New to Static Pages Only app? <a href="./">Visit the homepage</a> or read our <a href="credits">credits page</a>.</p> <div><small>* It is an adapted version of the Album Template that has been extracted from Bootstrap examples.</small></div> </div> </footer> <script hidden src="mimimi.app/Themes/default/css/vendors/bootstrap.bundle-5.3.5.min.js"></script> </section>
Save
Cancel