Spacing & Sizing

Spacing

Bootstrap has some utility margin and padding classes named as m-* , p-* such as my-0 pt-md-2:

html

<div class="ml-1 mr-n2 pt-3">
    margin from left, negative margin from right and padding from top
</div>

Ace has some extra ones that fall between Bootstrap's values and some pixel values for extra flexibility:

1.5 which falls between bootstrap's 1 & 2
2.5 which falls between bootstrap's 2 & 3
3.5 which falls between bootstrap's 3 & 4
4.25 which falls between bootstrap's 4 & 4.5
4.5 which falls between 4.25 & bootstrap's 4.75
4.75 which falls between 4.5 & bootstrap's 5
1px, 2px and 3px

html

<div class="px-25 m-1px">
    padding from sides and 1px margin
</div>

<div class="mb-n15">
    negative margin from bottom
</div>

<div class="pl-35">
    padding from left
</div>

<div class="pt-2px mx-3px">
    2px padding from top and 3px margin from sides
</div>

Note that these extra classes are not responsive like Bootstrap's.
Because these are declared in ace.css which comes after bootstrap.css and thus the CSS rule order required for that, cannot be achieved, unless you repeat all Bootstrap spacing values in Ace or vice versa.

For example in:

html

<div class="pt-2px pt-lg-3">
    2px padding from top and 1rem padding from top in larger devices
</div>

.pt-2px is declared in ace.css and after .pt-lg-3 which is declared in bootstrap.css and therefore overrides it, regardless of screen size.
So .pt-2px will always be applied

Sizing

Bootstrap has some sizing classes like w-auto, w-100 , h-50.
Ace has some extra ones:

w-1 and h-1 to w-6 and h-6 for fixed sizing
w-90 , w-95 , h-90 , h-95
w-101 which is width: calc(100% + 1px) and similar h-101 , w-102 , h-102
w-98 which is width: calc(100% - 2px) and similar h-98
minh-100 , minw-100 , mw-auto , mh-auto , mw-none , mh-none
w-inherit , h-inherit

html

<div class="w-90">
    <i class="fa fa-user w-4 h-4 pt-15 text-center bgc-purple text-white-tp1"></i>
</div>

Positioning

The following classes are available:

.pos-rel => position: relative
.pos-abs => position: absolute
.pos-fixed => position: fixed
.pos-sticky => position: sticky
.position-tr => top-right
.position-tl => top-left
.position-tc => top-center
.position-br => bottom-right
.position-bl => bottom-left
.position-bc => bottom-center
.position-rc => right-center
.position-lc => left-center
.position-l => left
.position-r => right
.position-t => top
.position-b => bottom
.position-center => center

html

<button type="button" class="btn btn-primary">
    Button Text
    <span class="bgc-white w-1 h-1 position-tr m-2px"></span>
    <!-- a white small rectangle located on button's top right with 2px margin from sides -->
</button>

Other

.rotate-45 .rotate-n45 for rotating an element 45deg or -45deg
.align-sub => vertical-align: sub
.overflow-visible
.flex-equal which makes flex items almost equal in size
.flex-fill which makes flex items fill all available parent space

html

<div class="flex-equal">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>