Sandbox: Difference between revisions
| [checked revision] | [checked revision] |
No edit summary |
No edit summary |
||
| Line 26: | Line 26: | ||
<div class="row align-items-md-stretch"> | <div class="row align-items-md-stretch"> | ||
<div class="col-md-6"> | <div class="col-md-6"> | ||
<div class="h- | <div class="h-80 p-4 border-primary text-white bg-dark rounded-3"> | ||
<h2 class="text-white">{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = | <h2 class="text-white">{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}} Change the background</h2> | ||
<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> | <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> | </div> | ||
<div class="col-md-6"> | <div class="col-md-6"> | ||
<div class="h- | <div class="h-80 p-4 border-primary bg-light border rounded-3"> | ||
<h2>{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = | <h2>{{Icon |name = Achievement|id = Achievement|link = Achievements |style = 1 |size = 48}} Add borders</h2> | ||
<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> | <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> | ||
Revision as of 08:40, 10 September 2025
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<a href="#" class="btn btn-primary">Go somewhere</a>
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
Card Title
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.
<a href="#" class="btn btn-sleek">Learn More</a>
НЕТ
НЕТ
ДА
English -----
278
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
