Bootstrap utility classes

Apart from utility classes that bundled with Bootstrap, we provided much more utility classes to reduce your css work. Please make sure you are familiar with Bootstrap utility classes before continue reading WrapAdmin utility classes.

Background Image Class

Overlays

Add a alpha colored layer between your background-image and element text for better contrast.

Elements using a background image can be overlayed with a dark layer by adding the data attribute data-overlay="*", where * is a number between 1 and 9; 1 is lighter layer and 9 is darker layer.

Class name Description
.overlay Prepare element to accept overlay-* classes. You don't need this class if your element has .bg-img class.
.overlay-dark Overlay color would be rgba(0,0,0,.35)
.overlay-darker Overlay color would be rgba(0,0,0,.50)
.overlay-darkest Overlay color would be rgba(0,0,0,.70)
.overlay-light Overlay color would be rgba(255,255,255,.55)
.overlay-lighter Overlay color would be rgba(255,255,255,.70)
.overlay-lightest Overlay color would be rgba(255,255,255,.90)

A text over the image

<div class="bg-img h-300px" data-overlay="5" style="background-image: url(../assets/images/gallery/bg7.jpg)">
  <h3 class="center-vh text-white">A text over the image</h3>
</div>

You might also need to have a light overlay. For this purpose, use data-overlay-light instead of data-overlay.


A text over the image

<div class="bg-img h-300px" data-overlay-light="7" style="background-image: url(../assets/images/gallery/bg7.jpg)">
  <h3 class="center-vh text-dark">A text over the image</h3>
</div>
Border Class Utilities

Border classes

You can add solid borders to an element using following classes. You're able to change the border color using border color utility classes.

The classes follows b{side}-{size} format, where {size} is one of 0, 1, 2, or 3 values. Also, {side} is one of:

  • t: Border top
  • b: Border bottom
  • l: Border left
  • r: Border right
  • x: Border left and right
  • y: Border top and bottom
  • null: All sides

Following table demonstrates available classes for 1px border.

Class name Description
.bt-1 border-top: 1px solid ...
.bb-1 border-bottom: 1px solid ...
.bl-1 border-left: 1px solid ...
.br-1 border-right: 1px solid ...
.bx-1 border-left: 1px solid ...
border-right: 1px solid ...
.by-1 border-top: 1px solid ...
border-bottom: 1px solid ...
.b-1 border: 1px solid ...








<div class="b-1 h-30px"></div><br>
<div class="bx-2 h-30px"></div><br>
<div class="by-3 h-30px"></div><br>
<div class="bl-3 border-primary h-30px"></div><br>
<div class="br-2 border-purple h-30px"></div><br>
<div class="bt-1 border-danger h-30px"></div><br>
<div class="bb-1 border-info h-30px"></div><br>
Color Class Utilities

Background colors

Solid colors

.bg-* can apply to any element, where * is a color name.

.bg-primary .bg-secondary .bg-success .bg-info .bg-warning .bg-danger .bg-purple .bg-pink .bg-cyan .bg-yellow .bg-brown .bg-dark

Pale colors

.bg-pale-* can apply to any element, where * is a color name.

.bg-pale-primary .bg-pale-secondary .bg-pale-success .bg-pale-info .bg-pale-warning .bg-pale-danger .bg-pale-purple .bg-pale-pink .bg-pale-cyan .bg-pale-yellow .bg-pale-brown .bg-pale-dark

Other colors

Some other fade colors are available for background-color.

.bg-white .bg-transparent .bg-light .bg-lighter .bg-lightest

Border colors

.border-* can apply to any element, where * is a color name.

Default color .border-primary .border-secondary .border-success .border-info .border-warning .border-danger .border-purple .border-pink .border-cyan .border-yellow .border-brown .border-dark .border-white .border-light .border-transparent

Text colors

Text colors

.text-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.

.text-primary .text-secondary .text-success .text-info .text-warning .text-danger .text-purple .text-pink .text-cyan .text-yellow .text-brown .text-dark .text-mute .text-light .text-lighter .text-fade .text-white

Hover colors

.hover-* can apply to any element, where * is a color name. Please note that you can safely add these classes to an <a> element.

Miscellaneous Class Utilities

Shadow classes

Add .shadow-{level} to an element, where {level} is a number from 0 to 5.

.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5


Shadow on hover

Add .hover-shadow-{level} to an element, where {level} is a number from 0 to 5.

.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5



Material shadow

Add .shadow-material-{level} to an element, where {level} is a number from 0 to 5.

.shadow-material-0
.shadow-material-1
.shadow-material-2
.shadow-material-3
.shadow-material-4
.shadow-material-5


Shadow on hover

Add .hover-shadow-{level} to an element, where {level} is a number from 0 to 5.

.shadow-0
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5

Block centering classes

Align a block vertically or horizontaly center

Class name Description
.center-v Using flexbox to center an element vertically.
.center-h Centering an element horizontally using margin: 0 auto;
.center-vh Using flexbox to center an element vertically and horizontally.

default
.center-v
.center-h
.center-vh
<span>default</span>
<span class="center-v">.center-v</span>
<span class="center-h">.center-h</span>
<span class="center-vh">.center-vh</span>

Rotating classes

This classes are to rotate an inline or inline-block element.

Class name Description
.rotate-45 Make an element inline-block and rotate it 45deg.
.rotate-90 Make an element inline-block and rotate it 90deg.
.rotate-180 Make an element inline-block and rotate it 180deg.

45 deg
90 deg
180 deg
<div class="rotate-45"></div>
<div class="rotate-90"></div>
<div class="rotate-180"></div>

Opacity classes

You can set opacity of an element using .opacity-{value} class, where {value} is a x5 number from 0 to 100 (e.g. opacity-50, opacity-75, etc.).


<div class="opacity-75 bg-info"></div>
<div class="opacity-50 bg-info"></div>
<div class="opacity-25 bg-info"></div>

Cursor classes

You can set cursor property of an element using .cursor-* utility classes. This class only supports .cursor-default, .cursor-pointer, and .cursor-text.


Default cursor - hover to see
Pointer cursor - hover to see
Text cursor - hover to see
<div class="cursor-default">...</div>
<div class="cursor-pointer">...</div>
<div class="cursor-text">...</div>
No Maker Class Utilities

No classes

Available classes are:

Class name Description
.no-border border: none
.no-padding padding: 0
.no-margin margin: 0
.no-shadow shadow: none
.no-text-shadow text-shadow: none
.no-scroll overflow: hidden
.no-radius border-radius: 0
.no-shrink flex-shrink: 0
.no-grow flex-shrink: 0
.no-letter-spacing letter-spacing: 0
.no-wrap white-space: nowrap;
flex-wrap: nowrap;
.no-underline text-decoration: none on :hover and :focus
Sizing Utilities

Fixed sizing

Apply .w-{size}px or .h-{size}px to any element (except inline elements) to set the width or height of the element to {size}px. Available sizes are:

  • 0, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • 10, 20, 30, 40, 50, 60, 70, 80, 90
  • 50, 150, 250, 350, 450
  • 120, 140, 160, 180
  • 25, 50, 75

For example, .w-50px applies width: 50px to the element.

Width examples
Class name Description
.w-0px width: 0
.w-10px width: 10px
.w-20px width: 20px
.w-{*}px width: {*}px

Height examples
Class name Description
.h-0px height: 0
.h-10px height: 10px
.h-20px height: 20px
.h-{*}px height: {*}px

Percentage sizing

Same as fixed sizing, you have classes to set width and height in percentage.

Width percentage sizing
Class name Description
.w-full width: 100%
.w-half width: 50%
.w-third width: 33.333333%
.w-fourth width: 25%
.w-fifth width: 20%
Height percentage sizing
Class name Description
.h-full height: 100%
.h-half height: 50%
.h-third height: 33.333333%
.h-fourth height: 25%
.h-fifth height: 20%

Fullscreen sizing

These classes makes size of the element as equal as the browser size.

Class name Description
.w-fullscreen width: 100vw
.h-fullscreen height: 100vh
.min-w-fullscreen min-width: 100vw
.min-h-fullscreen min-height: 100vh
Spacing Class Utilities

Padding and margin classes

Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. It uses Bootstrap 4 spacing format of {property}{sides}-{size}. Available sizes can be any of:

  • 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • 12, 16, 24
  • 15, 25, 35, 45
  • 120, 140, 160, 180
  • 100, 150, 200, 250, 300, 400, 500

Padding classes
Class name Description
.pt-40 padding-top: 40px
.pb-40 padding-bottom: 40px
.pl-40 padding-left: 40px
.pr-40 padding-right: 40px
.px-40 padding-left: 40px
padding-right: 40px
.py-40 padding-top: 40px
padding-bottom: 40px
.p-40 padding: 40px

Margin classes
Class name Description
.mt-40 margin-top: 40px
.mb-40 margin-bottom: 40px
.ml-40 margin-left: 40px
.mr-40 margin-right: 40px
.mx-40 margin-left: 40px
margin-right: 40px
.my-40 margin-top: 40px
margin-bottom: 40px
.m-40 margin: 40px

Gap items

These classes apply to a parent and make a horizontal gap between all immediate children by giving them margin-left and margin-right property.

Class name Gap size
.gap-items-1 4px
.gap-items-2 8px
.gap-items-3 or .gap-items 16px
.gap-items-4 24px
.gap-items-5 32px

Vertical and horizontal gap

Add .gap-y to any of .gap-items-* classes to have both vertical and horizontal gaps. These classes are meant to be use for parent that have a lot of children which break horizontal line and need space in vertical direction as well.

Typography Class Utilities

Font size

Apply .fs-{size} to any element, where {size} can be any of:

  • 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 10, 20, 30, 40, 50, 60, 70, 80, 90
  • 10, 15, 20, 25, 30, 35, 40, 45, 50
  • 22, 24, 26, 28

10px font size

18px font size

26px font size

<p class="fs-10">10px font size</p>
<p class="fs-18">18px font size</p>
<p class="fs-26">26px font size</p>

Font weight

Apply .fw-{value} to any element, where {value} can be any of: 100, 200, 300, 400, 500, 600, 700, 800, 900


Font weight: 100

Font weight: 300

Font weight: 500

<p class="fw-100">Font weight: 100</p>
<p class="fw-300">Font weight: 300</p>
<p class="fw-500">Font weight: 500</p>

Line height

Apply .lh-{size} to any element, where {size} can be any of:

  • 0, 1, 2, 3, 4, 5
  • 15, 25, 35, 45
  • 11, 12, 13, 14, 15, 16, 17, 18, 19
  • 22, 24, 26, 28

To better understanding of values, take a look at class definition of some of them:

  • .lh-1 { line-height: 1; }
  • .lh-15 { line-height: 1.5; }
  • .lh-24 { line-height: 2.4; }

Line height 1
Line height 1.8
Line height 2.8
Line height 4
<span class="lh-1">Line height 1</span><br>
<span class="lh-18">Line height 1.8</span><br>
<span class="lh-28">Line height 2.8</span><br>
<span class="lh-4">Line height 4</span>

Letter spacing

Apply .letter-spacing-{size} to any element, where {size} can be any of: 0, 1, 2, 3, 4, 5.

Please note that .ls-{size} is a short-named class for .letter-spacing-{size}.


1px letter spacing

3px letter spacing

5px letter spacing

<p class="letter-spacing-1">1px letter spacing</p>
<p class="letter-spacing-3">3px letter spacing</p>
<p class="letter-spacing-5">5px letter spacing</p>

Misc

Text truncate

Apply .text-truncate to any text element to crop your text with ellipse if it is larger than line width.


Place a sentence larger than with of the available size in the screen to see the result. Distinctively target resource-leveling outsourcing without impactful services. Rapidiously myocardinate best-of-breed paradigms for long-term high-impact.

<p class="text-truncate">Your long text</p>