Panels to Cards - Edmon Low Library
Design Guide
Maintenance & Upkeep
Panels to Cards
New Code for Panels or Wells with only a border:
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
New Code for Panels with a header:
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
Advanced Cards:
<div class="card card-square rounded-0 mb-3 w-100">
<!-- group card header -->
<div class="card-header text-bg-dark h2 rounded-0 ">
<span class="fs-2 color-primary me-2">
<i class="fa-solid fa-book"></i><1-- Use FontAwesome icon -->
</span>
Card Title
</div>
<div class="card-body">
<!-- group description -->
<p class="border-bottom pb-2">
Card description (optional)
</p>
<!-- Content -->
<p>Ut laudantium repellat nam dolorem aliquam aut voluptatem libero qui voluptatem molestiae aut consectetur. </p>
</div>
</div>
Documentation
Bootstrap 3.x
Bootstrap 5.x