Others

Front includes bunch of other predefined classes.

Background image hero

Specify the position of a background image:

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

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