-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use .html like every other example, change the layout, simplify some …
…things for now
- Loading branch information
Showing
2 changed files
with
105 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| --- | ||
| layout: examples | ||
| title: Masonry example | ||
| extra_js: | ||
| - src: "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" | ||
| integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" | ||
| async: true | ||
| --- | ||
|
|
||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous" async></script> | ||
|
|
||
| <div class="container py-5"> | ||
| <h1>Bootstrap and Masonry</h1> | ||
| <p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and cards component.</p> | ||
|
|
||
| <p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like so:</p> | ||
|
|
||
| {{< highlight html >}}<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous" async></script>{{< /highlight >}} | ||
|
|
||
| <p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p> | ||
|
|
||
| <hr class="my-5"> | ||
|
|
||
| <div class="row" data-masonry='{"percentPosition": true }'> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card"> | ||
| {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Card title that wraps to a new line</h5> | ||
| <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card p-3"> | ||
| <blockquote class="blockquote mb-0 card-body"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | ||
| <footer class="blockquote-footer"> | ||
| <small class="text-muted"> | ||
| Someone famous in <cite title="Source Title">Source Title</cite> | ||
| </small> | ||
| </footer> | ||
| </blockquote> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card"> | ||
| {{< placeholder width="100%" height="200" class="card-img-top" text="Image cap" >}} | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Card title</h5> | ||
| <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> | ||
| <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card bg-primary text-white text-center p-3"> | ||
| <blockquote class="blockquote mb-0"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> | ||
| <footer class="blockquote-footer text-white"> | ||
| <small> | ||
| Someone famous in <cite title="Source Title">Source Title</cite> | ||
| </small> | ||
| </footer> | ||
| </blockquote> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card text-center"> | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Card title</h5> | ||
| <p class="card-text">This card has a regular title and short paragraphy of text below it.</p> | ||
| <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card"> | ||
| {{< placeholder width="100%" height="260" class="card-img" text="Card image" >}} | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card p-3 text-right"> | ||
| <blockquote class="blockquote mb-0"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> | ||
| <footer class="blockquote-footer"> | ||
| <small class="text-muted"> | ||
| Someone famous in <cite title="Source Title">Source Title</cite> | ||
| </small> | ||
| </footer> | ||
| </blockquote> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-6 col-lg-4 mb-4"> | ||
| <div class="card"> | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Card title</h5> | ||
| <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> | ||
| <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> |
This file was deleted.
Oops, something went wrong.