Bootstrap Panels
Bootstrap Panels
Bootstrap Panels were a component in the Bootstrap framework used for creating collapsible content boxes. However, as of Bootstrap version 4, panels have been replaced by the Card component, which provides more flexibility and functionality.
Cards allow you to display content in a box-like structure with customizable headers, footers, and body content. Here is an example of how to create a basic card in Bootstrap 5:
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
<p class="card-text">Card Body</p>
</div>
<div class="card-footer">
Card Footer
</div>
</div>
This will create a card with a header, body, and footer. You can customize the appearance of the card by using additional classes, such as card-primary to change the background color, or card-img-top to add an image at the top of the card.
Cards also provide additional functionality, such as the ability to collapse and expand the body content using JavaScript. Here is an example of a collapsible card:
<div class="card">
<div class="card-header" data-bs-toggle="collapse" data-bs-target="#card-body">
Card Header
</div>
<div class="collapse" id="card-body">
<div class="card-body">
<p class="card-text">Card Body</p>
</div>
</div>
</div>
This will create a collapsible card with a header that, when clicked, will expand, or collapse the body content. You can customize the behavior of the card using additional JavaScript, such as adding an animation to the collapse and expand transitions.
Overall, Bootstrap Cards provide a powerful and flexible way to display content in a box-like structure with customizable headers, footers, and body content. They are highly customizable and can be used in a variety of contexts, such as product listings, user profiles, or news articles.