Sandbox: Difference between revisions
From Eco - English Wiki
| [checked revision] | [checked revision] |
| Line 24: | Line 24: | ||
<div class="row g-2 mb-3"> | <div class="row g-2 mb-3"> | ||
<div class="col-xs-12 col-sm-12 col-md- | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card"> | ||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | <div class="card-header bg-dark text-white">CardHeaderTitle</div> | ||
<ul class="list-group list-group-flush"> | <ul class="list-group list-group-flush"> | ||
| Line 32: | Line 32: | ||
</ul> | </ul> | ||
</div></div> | </div></div> | ||
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"><div class="card"> | <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card"> | ||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | |||
<ul class="list-group list-group-flush"> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
</ul> | |||
</div></div> | |||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card"> | |||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | |||
<ul class="list-group list-group-flush"> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
<li class="list-group-item">Listitem</li> | |||
</ul> | |||
</div></div> | |||
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6"><div class="card"> | |||
<div class="card-header bg-dark text-white">CardHeaderTitle</div> | <div class="card-header bg-dark text-white">CardHeaderTitle</div> | ||
<ul class="list-group list-group-flush"> | <ul class="list-group list-group-flush"> | ||
Revision as of 14:45, 18 February 2026
Test for new Icon for recipes with number on
10
Test Plant template with gallery
Aglonema Plant
Adipisicing pariatur occaecat exercitation sunt exercitation consectetur in dolor adipisicing consequat sunt magna occaecat occaecat.
CardHeaderTitle
- Listitem
- Listitem
- Listitem
CardHeaderTitle
- Listitem
- Listitem
- Listitem
CardHeaderTitle
- Listitem
- Listitem
- Listitem
CardHeaderTitle
- Listitem
- Listitem
- Listitem
Test info card with dark/light mode
Change the background
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.
Add borders
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.
