KB289718833: MediaBeacon - Bootstrap Classes For HTML Formatting

Description

Some Bootstrap classes are included in MediaBeacon 2018.x, 2019.x, and 20.0. This article contains examples of how these classes render in components that use the HTML Editor, and how they can be used to alter component presentation.

HTML Editor Examples

A screenshot of of the below code rendered in MediaBeacon HTML component.

<p class="display-3 font-weight-bold">Bootstrap Classes</p>

<hr>
<p class="text-black font-weight-bold">Text Colors</p>
<div class="row p-1">
<span class="border m-1 pl-2 pr-2 pb-1 text-blue">text-blue</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-indigo">text-indigo</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-purple">text-purple</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-pink">text-pink</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-red">text-red</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-orange">text-orange</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-yellow">text-yellow</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-green">text-green</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-teal">text-teal</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-cyan">text-cyan</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-white bg-gray-dark">text-white</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-gray bg-gray-dark">text-gray</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-gray-dark">text-gray-dark</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-primary">text-primary</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-secondary">text-secondary</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-success">text-success</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-info">text-info</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-warning">text-warning</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-danger">text-danger</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-light bg-gray-dark">text-light</span>
<span class="border m-1 pl-2 pr-2 pb-1 text-dark">text-dark</span>
</div>

<hr>
<p class="text-black font-weight-bold">Background Colors</p>
<div class="row p-1">
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-red">red</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-black bg-white border ">white</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-black bg-gray border">gray</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-gray-dark">gray-dark</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-primary">primary</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-black bg-secondary">secondary</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-success">success</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-info">info</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-warning">warning</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-danger">danger</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-black bg-light border">light</span>
<span class="rounded m-1 pl-3 pr-3 pb-1 pt-1 text-white bg-dark">dark</span>
</div>

<hr>
<p class="text-black font-weight-bold">Alignment</p>
<div class="row">
<div class="col-4 table-fix"><div class="border m-1 pl-2 pr-2 border text-left">text-left</div></div>
<div class="col-4 table-fix"><div class="border m-1 pl-2 pr-2 border text-center">text-center</div></div>
<div class="col-4 table-fix"><div class="border m-1 pl-2 pr-2 border text-right">text-right</div></div>
</div>

<hr>
<p class="text-black font-weight-bold">Font Weight</p>
<div class="row p-0 m-0">
<span class="display-4 pr-3 font-weight-lighter">font-weight-lighter</span>
<span class="display-4 pr-3 font-weight-light">font-weight-light</span>
<span class="display-4 pr-3 font-weight-normal">font-weight-normal</span>
<span class="display-4 pr-3 font-weight-bold">font-weight-bold</span>
<span class="display-4 pr-3 font-weight-bolder">font-weight-bolder</span>
</div>

<hr>
<p class="text-black font-weight-bold">Font Size</p>
<dir class="row row-middle p-0 m-0">
<p class="pr-3 small">small</p>
<p class="pr-3 ">Plain Text</p>
<p class="pr-3 display-5">display-5</p>
<p class="pr-3 display-4">display-4</p>
<p class="pr-3 display-3">display-3</p>
<p class="pr-3 display-2">display-2</p>
<p class="pr-3 display-1">display-1</p>
</dir>

<hr>
<p class="text-black font-weight-bold">Element Corners</p>
<span class="mr-2 pt-1 pr-4 pb-2 pl-4 bg-primary text-white display-4 text-left">No Rounding</span>
<span class="mr-2 pt-1 pr-4 pb-2 pl-4 bg-primary text-white display-4 rounded text-center">rounded</span>
<span class="mr-2 pt-1 pr-4 pb-2 pl-4 bg-primary text-white display-4 rounded-pill text-right">rounded-pill</span>

Component Control With CSS Class Field 

These classes may be applied to components' Custom CSS Classes field in View Preferences.

Margin (all sides): m-0, m-1, m-2, m-3, m-4, m-5, m-6, m-7
Padding (all sides): p-0, p-1, p-2, p-3, p-4, p-5, p-6, p-7
Add prefix to specify a side; Top (t), Right (r), Bottom (b), Left (l)
Examples: mr-2, pb-4