Skip to main content
MediaBeacon University

Bootstrap Classes For HTML Formatting

Abstract

Some Bootstrap classes are included in MediaBeacon 2018.x, 2019.x, and 20.0. This is an example 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 rendered text in MediaBeacon

bootstrap-examples-html.png

<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.

bootstrap-view-prefs.png

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