|
|
| Line 1: |
Line 1: |
| __NOTOC__ | | __NOTOC__ |
|
| |
| <div class="bg-primary">Primary</div>
| |
|
| |
| <div class="recipeitem">
| |
| <div class="itemicon">[[File:DaisyItem_Icon.png|64px]]</div>
| |
| <div class="itemcount itemcountyellow">10</div>
| |
| </div>
| |
|
| |
|
| |
|
| |
| <div class="row">
| |
| <div class="col-md-3"><div class="card">
| |
| <div class="card-header">Card Header Title</div>
| |
| <ul class="list-group list-group-flush">
| |
| <li class="list-group-item">List item 1</li>
| |
| <li class="list-group-item">List item 2</li>
| |
| <li class="list-group-item">List item 3</li>
| |
| </ul>
| |
| </div></div></div>
| |
|
| |
| <div class="row">
| |
| <div class="col-sm">
| |
| <div class="card">[[File:Banner4k.jpg|class=card-img-top|link=]]
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card title</h5>
| |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
| |
| <a href="#" class="btn btn-primary">Go somewhere</a>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="col-sm">
| |
| <div class="card border-primary text-white bg-dark">
| |
| <div class="card-header">Featured</div>
| |
| <div class="card-body">
| |
| <h5 class="card-title text-white">Card title</h5>
| |
| <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
| |
| <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
|
| |
| <div class="row align-items-md-stretch">
| |
| <div class="col-md-6">
| |
| <div class="h-80 p-4 border-primary text-white bg-dark rounded-3">
| |
| <h5 class="text-white">{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}} Change the background</h5>
| |
| <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
| |
| </div>
| |
| </div>
| |
| <div class="col-md-6">
| |
| <div class="h-80 p-4 border-primary bg-light border rounded-3">
| |
| <h5>{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}} Add borders</h5>
| |
| <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="card card-sleek" style="max-width: 460px;">
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card Title</h5>
| |
| <p class="card-text">Experience the sleek and modern design of our new card component. With a gradient
| |
| background and a smooth hover effect, this card will elevate the look and feel of your website.</p>
| |
| <a href="#" class="btn btn-sleek">Learn More</a>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="row">
| |
| <div class="col-xl-3 col-sm-6 col-12">
| |
| <div class="card border-danger">
| |
| <div class="card-content">
| |
| <div class="card-body">
| |
| <div class="media d-flex">
| |
| <div class="align-self-center">{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 64}}</div>
| |
| <div class="media-body text-right">
| |
| <h3>278</h3>
| |
| <p>[[Achievements]]</p>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| <div class="card border-primary">
| |
| <div class="card-body">
| |
| <h5 class="card-title">Card title</h5>
| |
| <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>
| |
| <p class="card-text">
| |
| <small class="text-muted">Last updated 3 mins ago</small>
| |
| </p>
| |
| </div>
| |
| <div class="card-footer"><div>[[File:Banner4k.jpg|class=card-img-top|link=]]</div></div>
| |
| </div>
| |
|
| |
|
| |
| <div class="row gy-4 gx-5">
| |
| <div class="col-md-6">
| |
| <gallery widths=100% heights=auto mode="slideshow" showthumbnails>
| |
| Rice_Plant.jpg
| |
| </gallery>
| |
| </div>
| |
| <div class="col-md-6">
| |
| <div class="card border-primary">
| |
| <div class="card-body">
| |
| <h2 class="card-title fs-40">Aglonema Plant</h2>
| |
| <p class="col-lg-10 card-text">Adipisicing pariatur occaecat exercitation sunt exercitation consectetur in dolor adipisicing consequat sunt magna occaecat occaecat.</p>
| |
| </div></div>
| |
| </div>
| |
| </div>
| |
|
| |
| <bootstrap_card header-image="[[File:Rice_Plant.jpg]]" style="width: 100%;">
| |
| Some quick example text that appears at the body of the card and fills the bulk of the card's content.
| |
| </bootstrap_card>
| |
