-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
Panels
Certainly! While Bootstrap 4 and later versions have replaced Panels with Cards, I can provide you with detailed content about Bootstrap Panels as they were used in Bootstrap 3, which might still be relevant for legacy projects or understanding the evolution of Bootstrap components.
Introduction to Bootstrap 3 Panels
In Bootstrap 3, panels were used as a simple and effective way to group content and add styling to a section of the webpage. Panels provided a means to encapsulate a block of content with an optional heading and footer.
Basic Structure of a Panel
<div class=”panel panel-default”>
<div class=”panel-heading”>Panel Heading</div>
<div class=”panel-body”>
Panel content goes here.
</div>
</div>
Explanation:
– The `.panel` class is used to define the basic panel container.
– `.panel-default` provides default styling to the panel.
– `.panel-heading` and `.panel-body` are used for the header and content area of the panel, respectively.
Panel with Footer
<div class=”panel panel-default”>
<div class=”panel-heading”>Panel Heading</div>
<div class=”panel-body”>
Panel content goes here.
</div>
<div class=”panel-footer”>Panel Footer</div>
</div>
Explanation:
– A `.panel-footer` class is added to include a footer in the panel.
– The footer is typically used for action items or additional information related to the panel content.
Panel Styles
Bootstrap 3 offers various contextual classes to style panels according to the nature of the content, can use contextual classes (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger):
Example: Success Panel
<div class=”panel panel-success”>
<div class=”panel-heading”>Success Panel Heading</div>
<div class=”panel-body”>
Success panel content.
</div>
</div>
Example: Info Panel
<div class=”panel panel-info”>
<div class=”panel-heading”>Info Panel Heading</div>
<div class=”panel-body”>
Info panel content.
</div>
</div>
Explanation for Styles:
– Panels can take various styles like `panel-success`, `panel-info`, `panel-warning`, and `panel-danger`, each corresponding to different contextual meanings (success, information, warning, and danger, respectively).
– These styles change the color of the panel header and border, providing a visual cue about the content type.
Customizing Panels
Adding Custom Classes
<div class=”panel panel-default custom-panel”>
<div class=”panel-heading”>Custom Panel Heading</div>
<div class=”panel-body”>
Content in a custom-styled panel.
</div>
</div>
CSS
.custom-panel { border-color: #333; background-color: #f9f9f9; } .custom-panel > .panel-heading { background-color: #333; color: white; } |
Explanation:
– Custom CSS can be applied to panels to change aspects like border color, background color, and text color.
– The `.custom-panel` class is an example of how to implement these custom styles.
YouTube Reference :
