Others

Front includes bunch of other predefined classes.

Background image hero

Specify the position of a background image:

Result
HTML

Background top position:

Background center position:

Background bottom position:

Background fixed attachment:

<div class="bg-img-hero mb-3" style="background-image: url(../assets/img/img24.jpg); height: 250px;"></div>
<div class="bg-img-hero-center mb-3" style="background-image: url(../assets/img/img24.jpg); height: 250px;"></div>
<div class="bg-img-hero-bottom" style="background-image: url(../assets/img/img24.jpg); height: 250px;"></div>
<div class="bg-img-hero-fixed" style="background-image: url(../assets/img/img24.jpg); height: 250px;"></div>

Font sizes

Result
HTML

.font-size-1

.font-size-2

.font-size-3

.font-size-4

.font-size-5

.font-size-md-down-3

.font-size-md-down-5

<p class="font-size-1">.font-size-1</p>
<p class="font-size-2">.font-size-2</p>
<p class="font-size-3">.font-size-3</p>
<p class="font-size-4">.font-size-4</p>
<p class="font-size-5">.font-size-5</p>
<p class="font-size-md-down-3 display-4">.font-size-md-down-3</p>
<p class="font-size-md-down-5 display-4">.font-size-md-down-5</p>

Line height

<p class="text-lh-sm">This is a small line height text.</p>
<p class="text-lh-md">This is a medium line height text.</p>

Z-index

<span class="z-index-n1"></span>
<span class="z-index-2"></span>
<span class="z-index-4"></span>

Overflow

<span class="overflow-hidden"></span>

Opacity

<span class="opacity-md"></span>

Previous Others

Next Background video