BootstrapComponents/Panel

→ Back to Bootstrap Components overview

Description

A panel in bootstrap is a bordered box with some padding around its content.

For available options to this component, please see the documentation on github.

Examples

Always visible

<bootstrap_panel heading="This is the panel headline" footer="And some footer text" color="danger">
Lorem ipsum dolor sit amet,...
</bootstrap_panel>

This is the panel headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

Collapsible

<bootstrap_panel collapsible heading="This is the panel headline" footer="And some footer text" color="success">
Lorem ipsum dolor sit amet,...
</bootstrap_panel>

This is the panel headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

Color variants

Panels support the following coler codes:

• default
• primary
• success
• info
• warning
• danger

This is a panel with color default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

This is a panel with color primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

This is a panel with color success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

This is a panel with color info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

This is a panel with color warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text

This is a panel with color danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim tempus augue ac dignissim. Suspendisse potenti. Vivamus tincidunt turpis ex, sed varius nisl vehicula vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam ut pulvinar ante. Duis pellentesque porttitor posuere. Praesent diam nisi, aliquet gravida tellus ac, dictum ultricies odio. Nullam quam dolor, venenatis iaculis elementum in, molestie in nulla. Mauris ut vehicula mi. Curabitur mollis sit amet nisl id tristique. Fusce semper feugiat urna, vitae efficitur ex aliquet ac. Duis nec posuere eros. Donec ex velit, pellentesque non lobortis blandit, congue at mi.

And some footer text