This widget contains:
- A header or top section with a white background where the widget title generally goes.
- A body or main section where most of the content goes.
<div class="card minheight"> <div class="card-header"> <h2 class="card-title c-darkgray">@String("Widget Title Goes Here")</h2> </div> <div class="card-body"> [Widget Content Goes Here] </div> </div>
These CSS classes are a variation of standard Bootstrap styles were in the HTML snippet for this widget:
.minheight– Applies a minimum height of 100 pixels for the widget.
.c-darkgray– Used to modify
.card-titledefault white text color to a dark gray (
Along with Bootstrap Cards classes.
.card– Creates the standard white background of the widget along with the default padding, shadowing, border-radius, etc. This is an easy way to make sure your custom widgets look like the other widgets without recreating the look and feel.
.card-header– Adds the standard padding and positioning for the header (top portion of the widget).
.card-title– Applies the standard header text size (22), alignment (center), and color (white).
.card-body– Applies standard padding for the middle/body of the widget.
Updated 4 months ago
Did this page help you?